使用 jQuery 填写表单

filling a form with jquery

本文关键字：表单 jQuery 使用      更新时间：2023-09-26

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

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

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

试试这个

.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);
});

演示

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

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

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

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

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

以下是它的工作原理：

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

工作小提琴

这是非常简单的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/

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

当您键入时;

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

或者集中注意力;

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

如果你打算使用很多这种类型的功能，那么可能值得看看像Knockoutjs这样的框架

。
相关文章：