文本字段更改时更改跨度答案

【问题标题】：Change span when text field changes文本字段更改时更改跨度
【发布时间】：2013-05-22 14:39:45
【问题描述】：

我有一个包含多个文本字段的表单。当我在现场写东西时，我想更改跨度标签。像这样：

有什么想法吗？

【问题讨论】：

你有没有尝试过？
你看过 jQuery .change() 处理程序吗？ api.jquery.com/change 或 keyup、keypress 或许多其他处理程序？
("input").keyup(function() { $(this).closest("span").text(this.value); });

【解决方案1】：

您可以使用keyup，然后将span 内容替换为textbox 值。

<input id="test" type="text" />
<span id="content"></span>

$("#test").keyup(function() {
    $("#content").html($("#test").val());
});

http://jsfiddle.net/

编辑：

您也可以按照pXL 的建议使用$(this).val()。

$("#test").keyup(function() {
    var val = $(this).val();
    $("#content").html(val);
});

【讨论】：

你也可以使用$(this).val()或this.value
@pXL - 是的。只是为了速度。我将在我的答案中进行编辑。

【解决方案2】：

您可以简单地使用 jquery。例如

<input type="text" id="mytext"/>
<span id="content"></span>

$(document).ready(function(){
    $("#mytext").keyup(function(){
            $('#content').html($(this).val());
        })
})

【讨论】：

【解决方案3】：

我会使用 $.keyup() 并使用输入值更新 html。
演示： Working Demo

$(document).ready(function()
{
    // Regular typing updates.
    $("#input").keyup(function()
    {
        $("#output").html($(this).val());
    });

    // If pasted with mouse, when blur triggers, update.
    $("#input").change(function()
    {
        $(this).keyup();
    });

    // Any value loaded with the page.
    $("#input").keyup();
});

【讨论】：

【解决方案4】：

失焦也是一种方法，

html:

<input type="text" id="txa" value="123" />
<span>345</span>

jquery:

$('input[id=txa]').blur(function () {
    $(this).next("span").text($(this).val());
});

很高兴为您提供帮助。

【讨论】：