Detect user output from text box

Asked

Viewed 33 times

1

I have a text box that displays the remaining characters, as I do to take this information, using javascript, when the user has already clicked on another text box (per example)?

HTML of the box and counter:

<textarea maxlength="210" rows="5" id="aboutPT" style="display: none; resize: none" name=""
 class="valid form-control">@dataAbout.PT</textarea>


 <p class="pull-right" id="count_message" style="margin-top: 10px; font-size:small"></p>

Script:

$('#overLimit').hide();

    $('#aboutPT').keyup(function countPT () {
        var text_length = $('#aboutPT').val().length;
        var ptRemaining = text_max - text_length;


        $('#count_message').html('<span class="label label-default">' + ptRemaining + '</span>' + ' @ResourcesHelper.GetResource(strValorSession, "remainingChars")');
    });
javascript jquery

  • What do you mean "displaying the remaining characters" and "when the user has already clicked on another text box"? You can explain it better and put together some code so we can figure out what you’ve got?

  • I already added, cumps

2 answers

0

The event blur is made for exactly this:

$(() => {
   $( '#aboutPT' ).blur(() => {
      $( '#count_message' ).hide(/*duracao em ms/fast/slow/nada*/);
   })
})

Obs : where does this id come from ? (I find irrelevant to your question)

$('#overLimit').hide();

0


Solution

To hide information from the remaining characters when leaving textArea used the event .focusout(). It’s very simple, I leave down an example:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focusout demo</title>
  <style>
  .inputs {
    float: left;
    margin-right: 1em;
  }
  .inputs p {
    margin-top: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div class="inputs">
  <p>
    <input type="text"><br>
    <input type="text">
  </p>
  <p>
    <input type="password">
  </p>
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>

<script>
var focus = 0,
  blur = 0;
$( "p" )
  .focusout(function() {
    focus++;
    $( "#focus-count" ).text( "focusout fired: " + focus + "x" );
  })
  .blur(function() {
    blur++;
    $( "#blur-count" ).text( "blur fired: " + blur + "x" );
  });
</script>

</body>
</html>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.