Javascript 如果输入框没有'；不包含数据（无用户按键）

如问题所述，如果

输入框不包含数据（=用户未按任何键），如何防止添加该输入框

以下是我目前的代码：

<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>

/2）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});
}); //]]>  

这样做的目的是，如果

<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>




我建议检查元素附加到的容器的最后一个
输入
元素是否为空（是否有输入值），如果有值，则添加一个新的
输入
，如果没有，则什么也不做

这一点如下所示：

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

$（'#添加'）。单击（函数（）{
var target=$（“#容器”），
新标签=$（''），
newInput=$（''）.appendTo（newLabel）；
if（target.find（'input'）.last（）.val（）！=''）{
newLabel.appendTo（目标）
}
});


当然，这确实需要将
input
元素分组到一个公共容器中（以便找到最后一个元素）

您发布的代码意味着您添加了具有相同id的多个元素，这是无效的HTML，并会导致JavaScript出现问题（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;
    }
});

$（'addScnt'）.live（'click'，function（））{
if（$（“#p#U气味输入”）.last（）.val（）！=“”）{
$（'p>
'）。附录（scntDiv）；
i++；
返回false；
}
});

这应该行得通。检查“p_scents”div中的最后一个输入字段是否为空。如果它不是空的，脚本将添加一个新的输入。
我更新您的JSFIDLE并检查这里

首先，将类用于输入，而不是ID

并使用jquery.on单击事件而不是.live，因为不推荐使用zlive

JQUERY
$（文档）.ready（函数（）{
$（函数（）{
var scntDiv=$（'p#u scents'）；
var i=1；
$（'#addScnt'）。在（'单击'，函数（）上）{
if（$（'input.p_scnt_'+（i-1））.val（）！=“”）{
$（'p>
'）。附录（scntDiv）；
i++；
}
否则{
警报（'先输入一些数据！'）；
$（'input.p_scnt_'+（i-1））.focus（）；
}
});
$（'#remScnt'）。在（'click'，function（）{
如果（i>2）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});
});
这是您的工作代码：

<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>


$（函数（）{
var scntDiv=$（'p#u scents'）；
$（'#addScnt'）。在（'click'，函数（）{
if（$（'input:last'）.val（）！=''）{
$（'p>
'）。附录（scntDiv）；
}否则{
警报（'输入必须有一个值…'）；
}
});
$（'#remScnt'）.live（'click'，function（）{
$（this.parent（'p'）.remove（）；
});
});



如果您使用的是最新的jQuery，则必须使用“on”而不是“live”。

别忘了在最有用的帖子上标记“已接受答案”。：）请详细说明您不想在哪种情况下添加文本框？我的意思是当上面的文本框为空时
<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>