Question

我对填写表单有疑问。我有这个HTML。

<input type="text" name="" id="voornaam" value="" class="full">
<span class="data-name">Dhr. name lastname</span>

在输入中键入名称时。必须在span数据名称中添加名称。您在输入中输入的名称。应该把它放在跨度中。

Answer 1

试试这个

<强> HTML

<input type="text" name="" id="voornaam" value="" class="full" />
<input type="text" name="" id="achternaam" value="" class="full" />
<span class="data-name">Dhr. name lastname</span>

<强>的jQuery

$('#voornaam').on('keyup', function () {
    var name = this.value;
    var lastname = $('#achternaam').val();
    $('.data-name').text(name + " " + lastname);
});
$('#achternaam').on('keyup', function () {
    var lastname = this.value;
    var name = $('#voornaam').val();
    $('.data-name').text(name + " " + lastname);
});

DEMO

Answer 2

使用以下代码附加到文本框的事件keydown并将其与范围同步：

$(function() {
    $("#voornaam").keydown(function() {
        $(".data-name").html($(this).val());
    });
});

您可以在此处找到演示： http://jsfiddle.net/py3G5/

Answer 3

这将与文本更改同时更改文本

 $(function() {
        $("#voornaam").keypress(function() {
            $(".data-name").html($(this).val());
        });
    });

Answer 4

以下是它的工作原理：

$("#voornaam").on('keyup', setName);

function setName(event) {
     $(".data-name").html($("#voornaam").val());
}

Working Fiddle

Answer 5

这是非常简单的javascript：

如果你想保持简单，你可以对元素进行全部操作：

的javascript：

<input type="text" id="source" onkeyup="javascript:$('#dest').text($('#source').val())">
<span id="dest"></span>

这里发生的事情是每次按下输入框中的某个键时，javascript事件onkeyup将触发，Jquery代码将id为“source”的输入值复制到id为“dest”的目标范围

Fiddler示例：http://jsfiddle.net/dqU5m/

Answer 6

在输入时或将焦点从输入移开时，是否必须添加名称？

键入时;

$(function () {
    $("input#voornaam").change(function (){
        $("span.data-name").html($(this).val());
    });
});

或关注焦点;

$(function () {
    $("input#voornaam").focusout(function (){
        $("span.data-name").html($(this).val());
    });
});

如果您要使用大量此类功能，可能值得查看Knockoutjs

等框架

用jquery填充表单

6 个答案: