jQuery onChange 将字段值添加到 HTML

Question

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

现在我明白了：

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

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

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

        });

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

谢谢！

Answer 1

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

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

http://jsfiddle.net/xY7Q6/

按键的问题是它不适用于复制和粘贴文本。

输入事件几乎是每个人都期望的“更改”（o：我认为这个事件是相当新的（HTML5？），较旧的浏览器可能无法获得该事件。

Answer 2

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

1. 也许检查一下你的选择器。另外，您可以使用 $(this) 而不是第二次选择 #page_name。
2. 变革并不总是像您想象的那样频繁发生。尝试将事件绑定到 keyup。
3. 另外，对节点进行 .html() 可能不是一个好主意。为了安全起见，您可能需要 .text() 它。

Answer 3

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

你需要的是按键。 相同

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

代码与您的代码

http://jsfiddle.net/y3zpP/