Question

以下是我的代码的副本：https://jsfiddle.net/5zLyyv94/

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>
<form method="post">
<input type="text" name="first name" placeholder="First Name" required="required" class="input-txt" />
</form>

基本上，我正在尝试将名称从Luke更改为人名在字段文本中的名字。

所以说，他们输入他们的名字为“Jason”

我希望Luke的跨度文本从Luke变为Jason。

提前致谢！

Answer 1

这应该让你开始（必须在字段外点击才能进行更新）：

$('input[name=first_name]').blur(function(){
  $('#initname').text( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>

<form method="post">
  <input type="text" name="first_name" placeholder="First Name" required="required" class="input-txt" />
</form>

您还可以使用keyup()方法实时更改范围文本：

$('input[name=first_name]').keyup(function(){
  $('#initname').text( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>

<form method="post">
  <input type="text" name="first_name" placeholder="First Name" required="required" class="input-txt" />
</form>

或者，在用户停止键入1.2秒（1200毫秒）之后：

pauseTime = 1200;

$('input[name=first_name]').keyup(debounce(function(event){
  $('#initname').text( this.value );
},pauseTime));

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>

<form method="post">
  <input type="text" name="first_name" placeholder="First Name" required="required" class="input-txt" />
</form>

参考文献：

https://remysharp.com/2010/07/21/throttling-function-calls

Answer 2

不使用外部库：区分使用onchange的方法：http://www.w3schools.com/jsref/event_onchange.asp

并且onkeyup： http://www.w3schools.com/jsref/event_onkeyup.asp

我想你更喜欢onkeyup而我用一个作为例子：

HTML

<h1 class="login-heading">
  <a href="./index.html" class="lnk2">Join</a> us, 
  <span id="initname">Luke</span>.</h1>
<form method="post">
  <input type="text" onkeyup="changeText(this)" name="first name" placeholder="First Name" required="required" class="input-txt" />
</form>

JS

function changeText(element) {
  document.getElementById('initname').innerHTML = element.value;
}

示例：https://jsfiddle.net/uaqrcc7a/

如何使用Javascript基于HTML中的输入文本字段更改文本元素？

2 个答案: