Question

我有一个<h3>，我希望根据输入字段中输入的内容更改值。这是我目前的代码：

<input id="Medication" name="Medication" size="50" type="text" value="">
<script>
$(document).ready(function () {
  $('#Medication').change(function () {
    $('#myAnchor').text($(this).val());
  });
});
</script>
<h3 id="myAnchor"></h3>

Answer 1

有许多不同的方法可以实现这一目标：

使用jQuery的解决方案＃1

$(document).ready(function () {
 $('#Medication').keyup(function () {
 $('#myAnchor').text($(this).val());
});
});

解决方案＃2使用Javascript - onkeyup

＆＃13;

function myFunction(input){
	var elementValue = input.value;
	document.getElementById("myAnchor").innerHTML = elementValue;
}

＆＃13;

<input id="Medication" name="Medication" onkeyup = myFunction(this) size="50" type="text" value="">

<h3 id="myAnchor"></h3>

＆＃13;

解决方案＃3使用Javascript - addEventListener

＆＃13;

document.getElementById("Medication").addEventListener("keyup", myFunction);
function myFunction() {
	var elementValue = document.getElementById("Medication").value;
    document.getElementById("myAnchor").innerHTML = elementValue;
}

＆＃13;

<input id="Medication" name="Medication" size="50" type="text" value="">
<h3 id="myAnchor"></h3>

＆＃13;

希望它有所帮助！

Answer 2

使用keyup处理程序动态更改文本

$(document).ready(function () {
  $('#Medication').keyup(function () {
    $('#myAnchor').text($(this).val());
  });
});

Answer 3

您可以使用 keyup 或 keydown

<input id="Medication" name="Medication" size="50" type="text" value="">
<script>
$(document).ready(function () {
  $('#Medication').keyup(function () {
    $('#myAnchor').text($(this).val());
  });
});
</script>
<h3 id="myAnchor"></h3>

Answer 4

当您离开输入字段并单击其他位置时，将触发jquery更改或javascript onchange事件。

每次按或释放键时都会触发keyup或keydown函数。如果你想在h3元素中同时写入，keyup或keydown是最好的选择。

如果你内联工作它是有效的，也是经济的：

<input type="text" onchange="$('#myAnchor').text(this.value)">

或

<input type="text" onkeydown="$('#myAnchor').text(this.value)">

但是，如下所述，如果您的脚本变得更复杂，最好不要内联（javascript，css等）内联。

Answer 5

是否可以使用多种功能分别更改多个ID？例如：

JavaScript：

function myFunction(input){
    var elementValue = input.value;
    document.getElementById("myAnchor","myAnchor2","myAnchor3").innerHTML = 
    elementValue;
}

HTML：

<input id="Medication" name="Medication" onkeyup = myFunction(this) size="50" type="text" value="">

<input id="Medication" name="Medication" onkeyup = myFunction(this) size="50" type="text" value="">

<input id="Medication" name="Medication" onkeyup = myFunction(this) size="50" type="text" value="">


<div id="myAnchor"></div>
<div id="myAnchor2"></div>
<div id="myAnchor3"></div>

html根据输入字段更改文本

5 个答案: