用jquery填充表單

Question

我有一個關於填寫表單的問題。我有這個HTML。

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

使用下面的代碼，重視你的文本框的事件​​與跨度同步它：

$(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」的目標範圍

提琴手示例：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