我有一个“文本框”，当用户按下“Enter”键时，我想将其内容发送到无序列表：
HTML
<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 场地？
更新
这就是我最终得到的结果（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：
任何一个代码块都会发生同样的事情（我的代码是第一个；adeno 的代码是第二个），即 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("");
}
});