Display textbox length on click event

Question

I'm trying to display textbox length upon click. The HTML markup looks like following:

 <div class="title" style="padding:20px 0 "> <input type="text" class="form-control txtKeywords" maxlength="80" placeholder="Click on keywords to combine your title"> <span id="displayChar"></span> </div>

Initially when the page loads I set the text of nearby span to following text:

 $('#displayChar').text("Title contains: 0/80 characthers");

If user enters something into the textbox, the changes are tracked by this event and corresponding value of textbox's length is displayed like this:

 $('.txtKeywords').on('keyup',function(){ var input = $(this); input.next("span").text("Title contains: "+ input.val().length + "/80 characthers"); });

This all works good. I've also setup HTML 5 textbox validation by setting the input property "maxlength" to 80 characthers...

Now I would just like to display the textbox length upon the td click in nearby table which basically displays titles of products and whom I assemble in the upper input textbox like following (this is the HTML markup):

 <tr> <td class="keywordClick" value="@item.Keyword"><h5 style="cursor:pointer;">@item.Keyword</h5></td> <td><b>@item.Sales</b></td> </tr>

And the event/code for assembling the title is:

 $(document).on("click", ".keywordClick", function () { var appendText = " " + $(this).attr('value'); if ($('.txtKeywords').val().length < 80) { // somehow here modify the span value to display .txtKeywords current length $('.txtKeywords').val(function (index, val) { return val+appendText; }); } else { ShowErrorMessage("Title can have maximum of 80 characters.") } });

In this last even upon .keywordClick I'd like to show the textbox length in the span's text when a keyword has been added to the textbox (to display it immediately after on click event if textbox length is <80).

Can someone help me out ?

@AshishBahl not sure that I understand you correctly? Can you clarify what you ment by that ? — User987
– User987, Commented Mar 8, 2017 at 12:50
@Rayon 3rd time luck... No the .txtKeywords is just one input... .keywordClick elements are multiple ones, since it's table generated from controller action :D — User987
– User987, Commented Mar 8, 2017 at 12:55

DeclanPossnett · Accepted Answer · 2017-03-08 13:19:44Z

Why not use a function to set #displayChar like below:

function displayCharLength (count) { $('#displayChar').text("Title contains: " + count + "/80 characthers"); }

Append the keyword on the click event, then get the count:

var currentLength = $('.txtKeywords').val().length;

Then just call the function and pass through the length:

displayCharLength(currentLength);

User987 · Accepted Answer · 2017-03-08 13:20:38Z

This turned out to work just fine:

 $("#displayChar").text(function(index,val){ return "Title contains: "+ $('.txtKeywords').val().length + "/80 characthers"; });

Collectives™ on Stack Overflow

Display textbox length on click event

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related