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

时间:2015-02-19 21:55:01

标签: javascript jquery css

点击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" />

3 个答案:

答案 0 :(得分:2)

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

  1. 您在输入中使用keypress事件,因此每次键入字母时都会触发。实际上,一旦用户输入完文本,你真的想要检查按钮点击。
  2. 您使用.text代替.val()来获取输入值
  3. 您使用.match()将输入与现有值进行比较,当indexOf()与您想要弄清楚的内容相匹配时(即“字符串中是否存在此字词)了吗?“)。
  4. 解决了这些核心问题,并在此处进行了一些其他调整后,以下代码似乎可以完成您要完成的任务:

    $("#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 也提出了一个非常好的观点,数组可能是处理单词集合的更好方法,但是,不知道全部范围你想要做什么,我把它留作了一个字符串。

答案 1 :(得分:1)

你可以这样做

 $("#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

答案 2 :(得分:1)

使用数组来跟踪所有单词

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