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

你有一些好主意，但实施不太对。几个关键问题：

您在输入中使用keypress事件，因此每次键入字母时都会触发。实际上，一旦用户输入完文本，你真的想要检查按钮点击。
您使用.text代替.val()来获取输入值
您使用.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 也提出了一个非常好的观点，数组可能是处理单词集合的更好方法，但是，不知道全部范围你想要做什么，我把它留作了一个字符串。

Answer 2

你可以这样做

 $("#button").click(function(){
             var value=$('#input').val();
             var toCheck = $('#test').html().split(" ");
             var check = value.split(" ");
             for(var i=0; i<check.length; i++)
             {
             if(toCheck.indexOf(check[i])!==-1) check[i]="";
             }
             $('#test').text($('#test').html() + " " + check.join(" "));     

        });

工作Fiddle

Answer 3

使用数组来跟踪所有单词

var words = [];
words.push($("#test").text());

每次单击提交按钮时，请检查此数组。如果数组中不存在输入字，则将其推送到数组

    $("#button").click(function(){
        //put input value into div

        var inputText = $.trim($("#input").val());
        if(words.indexOf(inputText)>=0){
            alert("Word exists");
            return;
        }

          words.push(inputText);
        $('#test').text($('#test').html() + " " + inputText);     

    });

FIDDLE LINK

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

3 个答案: