Jquery - Display value of user input live

Question

Similar to Stack Overflow, I'm trying to create a jquery method that records and displays the value of what a user enters into an <input type='text'> field.

<form>
  Language:</br>
  <input type="text" language="language">
  <input type="submit" value="submit">
</form>

<p>
</p>

<script>
  $(document).ready(function () {
    $(":text").keypress(function () {
      $("p").text($(":text").val());
    });
  });
</script>

It accurately records the correct value, but it is one step too slow. If I type in a first character, it doesn't show up, but after I type in a second character, only the first character is recorded. If I type in 3 characters, the first 2 are recorded, etc.

How can I fix this?

tabz100 · Accepted Answer · 2015-01-17 20:52:55Z

3

Try to bind the event to the keyup event

<form>
  Language:</br>
  <input type="text" language="language">
  <input type="submit" value="submit">
</form>

<p>
</p>

<script>
  $(document).ready(function () {
    $(":text").keyup(function () {
      $("p").text($(":text").val());
    });
  });
</script>

According to the jQuery docs: Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

edited Jan 17, 2015 at 20:52

answered Jan 17, 2015 at 20:22

tabz100

1,47311 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RyanZ Over a year ago

I see, the keyup event is different than the keypress event.

Ozan Over a year ago

keypress event is fired when a key is pressed. The moment you press a key, that character has not been written into the input yet. That is why if you immediately call val() on keypress, it returns the value without the pressed key.

Red2678 · Accepted Answer · 2015-01-17 20:24:07Z

0

$(document).ready(function () {
    $(":text").keyup(function () {
      $("p").text($(":text").val());
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Language:</br>
  <input type="text" language="language">
  <input type="submit" value="submit">
</form>

<p>
</p>

answered Jan 17, 2015 at 20:24

Red2678

3,3162 gold badges33 silver badges45 bronze badges

Comments

Mr. Polywhirl · Accepted Answer · 2015-01-17 20:45:38Z

0

You could also make a jQuery plugin.

$.fn.bindTo = function(element) {
  $(this).keyup(function() {
    element.text($(this).val());
  });
};

$(document).ready(function() {
  $("#input").bindTo($("#output"));
});

label {
  display: inline-block;
  width: 60px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="input">Input:</label>
  <input id="input" type="text" language="language">
  <br />
  <label for="output">Output:</label>
  <span id="output"></span>
</form>

answered Jan 17, 2015 at 20:45

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Collectives™ on Stack Overflow

Jquery - Display value of user input live

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related