html根据输入字段更改文本

Question

I have an <h3> that I want the value of to change based on what is typed in the input field. Here is the code I currently have:

<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

There are many different ways to accomplish this:

Solution #1 using jQuery

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

Solution #2 using Javascript - onkeyup

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

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

Solution #3 using Javascript - addEventListener

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

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

Hope it helps!

Answer 2

use a keyup handler to dynamically change the text

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

Answer 3

You can use keyup or 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

The jquery change or javascript onchange event is fired when you leave the input field and click somewhere else.

The keyup or keydown functions are fired every time you press or release a key. If you want simultaneous writing in the h3 element, keyup or keydown are the best options.

It works and is economical if you do it inline:

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

or

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

though, as commented below, if your script is going to get a lot more complex, it's better not to do things (javascript, css, etc) inline.

Answer 5

Is it possible to have multiple functions to change multiple ids separately? for example:

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>