防止添加不包含数据的输入框(没有用户按键)

Prevent an input box from being added if it doesn't contain data (no user keypress)

本文关键字：用户 输入 添加 包含 数据      更新时间：2023-09-26

如问题所述，如果不包含数据(=用户未按任何键)，我如何阻止input box被添加。

下面是目前为止的代码: 
<script type='text/javascript'> //<![CDATA[ 
$(window).load(function(){
    $(function(){
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;
        $('#addScnt').live('click', function(){
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value"/></label><a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
        });
        $('#remScnt').live('click', function() {
            if (i > 2) {
                $(this).parents('p').remove();
                i--;
            }
            return false;
        });
    });
}); //]]>  
</script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

目标是如果

不能添加另一个输入框
<input type="text"id="p_scnt">

是空的。我该怎么做呢?

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

我建议检查元素附加到的容器的最后一个input元素不是空的(它有一个输入值)，如果有一个值添加一个新的input，如果没有，那么什么也不做。

如下所示:

$('#add').click(function(){
    var target = $('#container'),
        newLabel = $('<label />'),
        newInput = $('<input />').appendTo(newLabel);
    if (target.find('input').last().val() !== '') {
        newLabel.appendTo(target)
    }
});

JS Fiddle demo.

当然，这需要将input元素分组在一个公共容器中(为了找到最后一个元素)。

您发布的代码意味着您添加了多个具有相同id的元素，这是无效的HTML，并将导致JavaScript的问题(它只会返回第一个元素，它发现给定的id)。

像这样修改你的点击功能:

$('#addScnt').live('click', function() {
    if($("#p_scents input").last().val() != ""){
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    }
});

这应该可以工作。它检查最后一个输入字段在你的' p_ents 'div是否为空。如果它不是空的，脚本将添加一个新的输入

我更新了您的jsfiddle并在这里检查http://jsfiddle.net/QfXpE/1/

首先，使用class作为输入而不是id。

使用jquery .on click event代替。live，因为live已经不支持了http://api.jquery.com/live/

<标题> JQUERY h1> div class="answers">

下面是你的工作代码:

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
    var scntDiv = $('#p_scents');
    $('#addScnt').on('click', function () {
        if($('input:last').val()!=''){
        $('<p><label for="p_scnts_' + $('p').length + '"><input type="text" id="p_scnt" size="20" name="p_scnt_' + $('p').length + '" value="" placeholder="Input Value" /></label> <a href="javascript:void(0);" id="remScnt">Remove</a></p>').appendTo(scntDiv);        
    }else{
        alert('Input must have a value...');
    }
    });
    $('#remScnt').live('click',function () {        
        $(this).parent('p').remove();
    });
});
</script>
<h2><a href="javascript:void(0);" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

如果你正在使用最新的jQuery，那么你必须使用'on'而不是'live'。

小提琴演示

相关文章：