Get a variable immediately after typing

Question

I have this code

<span></span>

and this

<div> variable like a number </div>

and

<script>

$(document).ready(function(){
  var x = $('div').html();
  $('span').html(x)
});

</script>

I need that every time I change the div value, the span reflects the changes of the div

For example.

If I type 1 in the div, the span should immediately show me number 1

If I type 3283 in the div, the span should immediately show me number 3283

but with this code - I need to create

$("div").click(function(){

      var x = $('div').html();
      $('span').html(x)

});

I do not want to use .click(function) . in need this function run Automatically

after your answer I use this code

http://jsfiddle.net/Danin_Na/uuo8yht1/3/

but doesn't work . whats the problem ?

how would you change the div's content? – Anoop Joshi P May 11 '15 at 11:38 — Anoop Joshi P, May 11 '15 at 11:38
Do you have an input field in the div? – Kevin May 11 '15 at 11:41 — Kevin, May 11 '15 at 11:41

score 1 · Accepted Answer · answered May 11 '15 at 12:12

This is very simple. If you add the contenteditable attribute to the div, you can use the keyup event:

var div = $('div'),
    span = $('span');

span.html(div.html());

div.on('keyup', function() {
    span.html(div.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span></span>
<div contenteditable="true"> variable like a number </div>

Vishwajeet Bose · Answer 2 · 2015-05-11T11:51:17.567

0

  $("input[type=text]").change(function(){

      var x = $('div').html();
      $('span').text(x)

  });

This can be use with textbox or textarea, For div user cannot enter text.

http://jsfiddle.net/uuo8yht1/

edited May 11 '15 at 11:51

answered May 11 '15 at 11:43

Vishwajeet Bose

430
3
12

You can enter text into the div by using the contenteditable attribute, there is no need for an extra input – Pete May 11 '15 at 12:14

score 0 · Answer 3 · edited May 23 '17 at 12:16

You need a key listener, jquery provides a .keypress(), Examples are provided on keypress documentation.

I recommend to lookup the combination of .on() and .keyup() with some delay or throttle/debounce either via jquery or underscore.js library.

One of the reason or need for delay is to prevent too many event calls which will affect performance.

Here is an example of code in another question regarding throttle and keyup

Hope this helps.

score 0 · Answer 4 · answered May 11 '15 at 11:48

0

here is a demo with input:

html:

<span></span>
<input type="text" id="input01">

js:

$(document).ready(function(){
   $( "#input01" ).on('keyup',function() {
     var x = parseFloat($('#input01').val());
     $('span').html(x)
   });  
});

answered May 11 '15 at 11:48

Yangguang

1,785
9
10

score 0 · Answer 5 · answered May 11 '15 at 11:49

How can you edit in div element on browser? It have to be any input type then only you can edit or change value.

So for that on click of that div you have to show some input/textarea at that place and on change event of that input you can update the value of input in span.

    <div id="main-div">
   <input type="text" id="input-box"  /> 
   </div>

    <script>

$(document).ready(function(){
    $('#input-box').change(function(){
        $('span').html($(this).text)
    });

});

</script>

You can change the div by using the `contenteditable` attribute, there is no need for an extra input — Pete, May 11 '15 at 12:13

score 0 · Answer 6 · answered May 11 '15 at 11:51

.change() will not work with a DIV-element. Since you did not specify how the DIV is updated I would recommend either setting a timer or using .keypress()

Example with timer:

$(function(){
  var oldVal = "";
  var divEl = $("div");
  setInterval(function(){
    var elTxt = divEl.text();
    if (elTxt != oldVal) {
      oldVal = elTxt;
      $("span").text(elTxt);
    }
  }, 50);
});

Get a variable immediately after typing

6 Answers6