jQuery onChange 将字段的值添加到 HTML答案

【问题标题】：jQuery onChange add value of field to HTMLjQuery onChange 将字段的值添加到 HTML
【发布时间】：2011-04-25 17:17:27
【问题描述】：

我想将输入字段的值实时打印到 DIV。

现在我得到了这个：

        $("#page_name").change(function () {

            var new_val = $("#page_name").val();

            $("#page_url").html(new_val);

        });

显然，它不起作用。有人有建议吗？

谢谢！

【问题讨论】：

能贴出相关的HTML吗？
它有效....见jsfiddle.net/QrcUb ;-P

标签： jquery html input onchange

【解决方案1】：

正如所指出的，“更改”仅在元素失去焦点时发生。将其绑定到按键事件的另一种方法是将其绑定到“输入”事件。

$('#page_name').bind('input', function(e){
    var output = e.target.value;
    $('#page_url').text(output);
});

http://jsfiddle.net/xY7Q6/

keypress 的问题在于它不能用于复制和粘贴文本。

输入事件几乎是每个人都期望的“改变”（o：我认为这个事件是相当新的（HTML5？），旧的浏览器可能没有那个。

【讨论】：

【解决方案2】：

应该确实有效。我的最佳猜测是：

也许检查一下你的选择器。此外，您可以使用 $(this) 而不是第二次选择 #page_name。
更改并不总是像您想象的那样频繁发生。尝试将事件绑定到 keyup。
此外，对节点进行 .html() 处理可能不是一个好主意。您可能需要 .text() 以确保安全。

【讨论】：

【解决方案3】：

实际上它会起作用，但只有当您将光标移出输入框时才会起作用，因为当焦点丢失时会触发更改。

您需要的是按键。代码和你的一样

 $("#page_name").keypress(function () {
            var new_val = $("#page_name").val();
            $("#page_url").html(new_val);
});

在这里测试一下

http://jsfiddle.net/y3zpP/

【讨论】：