html - 如何使用 AJAX 同时编辑两个 div

Question

谁能告诉我如何在编辑左侧文本字段并更新右侧文本字段时实现此功能。我的猜测是使用 AJAX。我也想用。我该怎么做。需要做什么。这是链接。http://printbindaas.com/bjp

Answer 1

只是普通的javascript。在keyup事件中，右 div 获得与左 div 相同的内容。

Answer 2

在每个输入上放置一个data-元素，该元素具有与之相关的 div 的 ID，即：

<input data-rel="name" type="text" name="name" />
<div id="name" />

$(':input').on('change keyup', function() {
    var rel = $(this).data('rel');
    if (rel) {
        $('#' + rel).text(this.value);
    }
});

或者，使用name输入字段：

<input type="text" name="name" />
<div id="field_name" />

$(':input').on('change keyup', function() {
     $('#field_' + this.name).text(this.value);
});

Answer 3

给你 - http://jsfiddle.net/JpUuk/

HTML：

Name: <input type="text" id="name">
<div style="border: 1px solid black">Your name is: <span id="name_out"></span></div>

JavaScript（使用 jQuery）：

$('#name').bind('keyup', function() {
    $('#name_out').html(this.value);
})

或者使用纯 JavaScript：

document.getElementById('name').onkeyup = function() {
    document.getElementById('name_out').innerHTML = document.getElementById('name').value;
};