我有一个“文本框”的内容,我想发送到一个无序的列表,当用户砸“Enter”键:
<input type="text" name="InputUPC" id="InputUPC" /> <ul id="CandidateUPCs" name="CandidateUPCs" class="ulUPCs"></ul>
CSS
.ulUPCs { min-height:160px; height:auto !important; height:160px; max-width:344px; width:auto !important; width:344px; border-style:solid; border-width:2px; }
jQuery的
$('#InputUPC').keypress(function (event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { var upcPrefix = jQuery.trim($("#InputUPC").val()); if (upcPrefix != "") { $("#CandidateUPCs").append('<li>' + upcPrefix + '</li>'); } $("#InputUPC").val(""); } });
当我输入“InputUPC”并将其键入时,该值将显示在无序列表中,但仅对于“简短的第二个”则会消失. “InputUPC”中的值也会消失,但是正如预期的那样.为什么它也会腾出UL的前兆?
UPDATE
这是我结束的(http://jsfiddle.net/AEy9x/),主要是基于adeneo的答案:
$('#InputUPC').keyup(function (event) { event.preventDefault(); var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { var upcPrefix = jQuery.trim($("#InputUPC").val()); if (upcPrefix != "") { $("#CandidateUPCs").append('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>'); $("#CandidateUPCs").append('<input type=\"checkBox\" name=' + upcPrefix + ' id=' + upcPrefix + ' />'); $("#CandidateUPCs").append('<br>'); } $("#InputUPC").val(""); } });
更新2
在jsfiddle中,只要jquery版本高于1.6.4就可以工作.
在这种情况下,我将我的项目更新为jquery 1.9.1(在一个地方引用了1.4.4版本,在所有其他地方引用了1.6.2版本).但是,它还是不行吗?
我看到UL中的val是一个“闪光灯”,但是它再次消失了.
注意:我还更新了jquery-ui:
@* <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"> </script>*@ <script src="@Url.Content("http://code.jquery.com/ui/1.10.3/jquery-ui.js")" type="text/javascript"> </script>
更新3
@sriniris:
同样的事情发生在任何一个代码块(我的是第一个; adeneo是第二个),即UL被填充了一个纳秒,然后飞行的位置比润滑和抛光的闪电更快:
$('#InputUPC').keyup(function (event) { event.preventDefault(); var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { var upcPrefix = jQuery.trim($("#InputUPC").val()); if (upcPrefix != "") { $("#CandidateUPCs").append('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>'); $("#CandidateUPCs").append('<input type=\"checkBox\" name=' + upcPrefix + ' id=' + upcPrefix + ' />'); $("#CandidateUPCs").append('<br>'); } $("#InputUPC").val(""); } }); $('#InputUPC').on('keyup',function(e) { e.preventDefault(); if (e.which == 13) { var upcPrefix = $.trim( this.value ); if (upcPrefix != "") { var upcElem = $('<li />',{text : upcPrefix}); $("#CandidateUPCs").append(upcElem); } this.value = ""; }
更新4
问题是表单正在提交,即使有代码来防止(preventDefault).我知道这一点,因为当我选择一个复选框时,它们都被选中,同时短暂地输入UL的值也是再见的.那么对这个“隐喻”的混合体有什么分析:
e.preventDefault(); ! important
?
更新5
我仍然有同样的问题:
$('#InputUPC').keyup(function (event) { if (event.stopPropagation) { // W3C/addEventListener() event.stopPropagation(); } else { // Older IE. event.cancelBubble = true; } event.preventDefault(); var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { //alert('get the values that start with what was entered and place it in ulUPCStartsWith'); var upcPrefix = jQuery.trim($("#InputUPC").val()); if (upcPrefix != "") { $("#CandidateUPCs").append('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>'); $("#CandidateUPCs").append('<input type=\"checkBox\" name=' + upcPrefix + ' id=' + upcPrefix + ' />'); $("#CandidateUPCs").append('<br>'); } $("#InputUPC").val(""); } });
解决方法
$('#InputUPC').on('keyup',function(e) { e.preventDefault(); if (e.which == 13) { var upcPrefix = $.trim( this.value ); if (upcPrefix != "") { var upcElem = $('<li />',{text : upcPrefix}); $("#CandidateUPCs").append(upcElem); } this.value = ""; } });