?
Solved

onKeyUp / onKeyDown on Textbox displaying "X characters remaining in label" using javascript.

Posted on 2008-11-11
10
Medium Priority
?
1,928 Views
Last Modified: 2012-05-05
Greetings.. and thank you for using time to read my post..

I have a keyHandler.js file in my web-project where i have this function :

function CountLeft(field, count, max)
{
    var target = $get(count);
   
    if (field.value.length > max) field.value = field.value.substring(0, max);
    else target.value = max - field.value.length;
}  

.... i want to use this function on basically all textboxes in my webproject and are trying to call the function this way :

<asp:TextBox ID="txtTitle" runat="server" Width="100%" onKeyDown='CountLeft(this, "<%# lblTitleCL.ClientID %>", 50)' /><br />
<asp:Label ID="lblTitleCL" runat="server" /><asp:Label runat="server" ID="lblTitleCLDesc" Text=" characters remaining." />

... so to sum things up... lblTitleCL should display the total available characters. With no characters in txtTitle it should display "50".. on each onKeyDown it should call the CountLeft function, and display the correct amount of characters left in the label.

One problem.. is that i cannot seem to get the lblTitleCL control with this function.. am i declaring it the correct way in the function call ?

And.. how do i return the remaining characters to the label again ?

Cheers.. and thanx in advance.

Nygter.
0
Comment
Question by:Nygter
  • 7
  • 3
10 Comments
 

Author Comment

by:Nygter
ID: 22930405
I have also tried this one with no result :

<asp:TextBox ID="txtTitle" MaxLength="100" runat="server" Visible="False" Width="100%" onKeyUp="textCounter(txtMessage, this.form.myCounter, 250);" onKeyDown="textCounter(txtMessage, this.form.myCounter, 250);" />
<span id="myCounter">250</span> remaining characters.

function textCounter(field, countfield, maxlimit)
{
if (field.value.length > maxlimit)
   field.value = field.value.substring(0, maxlimit);
else
   countfield.value = maxlimit - field.value.length;
}

0
 

Author Comment

by:Nygter
ID: 22930788
This one is very close to working, except that when the total number of allowed characters (maxLen) is reached.. it still counts downwards.. aka.. the substring doesn't work :
if (len > maxLen)
            {
                control.innerHTML = txt.substring(0, maxLen);

it should stop, and remove the latest character if it goes to zero. (0).


function countDown(control, maxLen, counter, typeName)
{
    var len = control.value.length;
    var txt = control.value;
    var span = document.getElementById(counter);
    span.style.display = '';
    span.innerHTML = (maxLen - len) + ' gjenstående tegn...';
    if (len >= (maxLen - 10)) 
    {
        span.style.color = 'red';
            if (len > maxLen) 
            {
                control.innerHTML = txt.substring(0, maxLen);
                //span.innerHTML = (maxLen - control.value.length) + ' gjenstående tegn...';
                //field.value = field.value.substring(0, maxlimit);
 
            }
    } 
    else 
    {
        span.style.color = ''; 
    }
}

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22938680
span.innerHTML = ( (maxLen - len>0)?(maxLen - len):0) + ' gjenstående tegn...';

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Nygter
ID: 22938875
Thank you for the answer mplungjan, but the only thing that doesn't work (which has to work) is that i can still type in the field. The Counter stops at zero now, but i can still type ahead after the limit has been reached.

Know how ?

Terje.
0
 

Author Comment

by:Nygter
ID: 22938901
which means... this one has to trigger some way :

txt = txt.substring(0, maxLen);
0
 

Author Comment

by:Nygter
ID: 22938962
on textbox which has a "maxlength" property this works ofcourse.. but a mulit-line textbox which is rendered as a <textarea> i need to have this in the javascript..
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 22939011

<script>
function countDown(control, maxLen, counter, typeName) {
  var len = control.value.length;
  var txt = control.value;
  var span = document.getElementById(counter);
  span.style.color = ''; 
  span.style.display = '';
  diff = maxLen - len;
  span.innerHTML = ((diff > 0)?diff:0) + ' gjenstående tegn...';
  if (len < maxLen-10 ) return true; // no need to test
  span.style.color = 'red';
  if (len > maxLen) {
    control.value = txt.substring(0, maxLen);
    return false
  } 
  return true
}
</script>
<input type="text" onKeyUp="return countDown(this,20,'myCounter')">
<span id="myCounter">20 gjenstående tegn...</span>

Open in new window

0
 

Author Comment

by:Nygter
ID: 22939221
Wicked work mplungjan !! :) that worked awfully good !

A true genius you are :)
0
 

Author Closing Comment

by:Nygter
ID: 31515499
Thanx a bunch for clearing out my headache. :)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22939912
:)
we could also assign a keyhandler so you could not even type the max+1 character, but the above will work too
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 14 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question