javascript - 试图创建一个只允许用户在此 jquery 中输入一次单词的输入？

Question

点击http://jsfiddle.net/4y1b1j8g/30/查看。我正在尝试创建一个只允许用户输入一次单词的输入。如果单词“dog”存在，则用户不能再次输入 dog。但是我的代码没有按预期工作。帮助，感谢。

$("#input").keydown(function(event) {
    var $input = $('#input');
    var txtToMatch = $('#test').text();
    var iLimit = 1;
    var sMatch = $('#input').text().match(txtToMatch);

    if (sMatch !== null && sMatch.length > iLimit) {
        alert('same word')
    }
    else {
            //put input value into div
            var value = $('#input').val();
            $('#test').text($('#test').html() + " " + value);
    }
});

.test {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" id="test">dog</div>
<input type="text" id="input" />
<input type="button" id="button" value="submit" />

Answer 1

您在那里有一些好主意，但实现不太正确。几个关键问题:

1. 您在输入中使用了 keypress 事件，所以它会在您每次键入字母时触发。实际上，一旦用户完成输入他们的文本，您真的想要检查按钮点击。
2. 您使用 .text 而不是 .val() 来获取您的输入值
3. 您使用 .match() 将输入与现有值进行比较，而 indexOf() 与您想要找出的内容匹配得更好(即“这个词是否存在于字符串中？”)。

在解决了这些核心问题并进行了一些其他调整后，以下代码似乎可以完成您想要完成的工作:

$("#button").click(function() {
    var value = $.trim($('#input').val());

    if (value !== "") {
        var txtToMatch = $('#test').text();
        var iMatch = txtToMatch.indexOf(value);

        if (iMatch !== -1) {
            alert('Word already exists!');
        }
        else {
            //put input value into div
            $('#test').text(txtToMatch + " " + value);
        }
    }
});

.test {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" id="test">dog</div>
<input type="text" id="input" />
<input type="button" id="button" value="submit" />

编辑: Yong Wang 也提出了一个很好的观点，数组可能是处理单词集合的更好方法，但是，不知道完整的范围你正在尝试做的事情，我把它留作一个字符串。