用jquery填写表格[关闭]答案

【问题标题】：filling a form with jquery [closed]用jquery填写表格[关闭]
【发布时间】：2014-01-04 22:58:52
【问题描述】：

我有一个关于填写表格的问题。我有这个 html。

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

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

【问题讨论】：

你有什么问题？
Show a number of text input form fields based on a number entered into another field 的可能重复项

标签： javascript jquery forms

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

这将在更改文本的同时更改文本

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

【讨论】：

【解决方案4】：

这是它的工作原理：

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

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

Working Fiddle

【讨论】：

【解决方案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”的目标范围

提琴手示例：http://jsfiddle.net/dqU5m/

【讨论】：

【解决方案6】：

必须在您键入或将焦点从输入移开时添加名称吗？

当您输入时；

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

或者集中注意力；

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

如果您要使用大量此类功能，则可能值得研究像 Knockoutjs 这样的框架

【讨论】：