Question

我有一个“文本框”，当用户对“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 premesis？

更新

这是我最终的结果（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("");
        }
    });

Answer 1

$('#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 = "";
    }
});

Answer 2

问题中的代码运行正常，然而我想在您的实际代码中，input位于表单中。

因此，点击回车键很可能会提交表格（参见spec中的§4.10.22.2“隐式提交”）。您所看到的不是清除ul的脚本/逻辑错误;你正在看页面正在重新加载。

您可以通过添加：[event object].preventDefault();

来解决此问题

<强>示例：

Answer 3

Adeneo的解决方案是正确的。但是如果你想在不升级到jQuery 1.9的情况下让它工作，你总是可以使用“bind”事件而不是“on”。从v1.7开始支持On并在新版本中替换bind。

$('#InputUPC').bind('keyup', function(e) {

Answer 4

更新4问题是表单正在提交，即使   有防止这种情况的代码（preventDefault）。我知道这是因为   当我选择一大堆复选框时，它们都会被取消选中   短暂输入UL的值也会再次出现。所以   对于这种“隐喻”的混合物是否存在类似的东西：

e.preventDefault（）; ！重要？

您的问题可能是由事件冒泡引起的。尝试在event.preventDefault（）;

之前添加此代码

if (event.stopPropagation) { // W3C/addEventListener()
        event.stopPropagation();
    } else { // Older IE.
        event.cancelBubble = true;
}

为什么在我添加它后，我正在添加到无序列表中的val消失了？

更新

更新2

更新3

更新4

更新5

4 个答案: