How to change color of textbox when value exceed the max of char
I have a textboxes whose width varies, let us suppose that the maximum no of visible characte开发者_Python百科r in a textbox are 10. now I want that when the user enters more than 10 char the color of the textbox is changed.
To check all the values the user has to hover his mouse on it. so how do I change color of textbox based on the given condition.
Thanks or Please tell me how to find no of visible characters in a textbox
If you are familiar with jQuery it can be solved by the following:
html
<input type="text" name="textField" title="textField" value="asdfasdfasdf" />
(jquery)javascript
$('input[type=text]').mouseover(function () {
if($(this).val().length > 10)
{
$(this).css('background-color', 'red');
}
});
I don't really know about the "no of visible" characters.
You'll have to use javascript to do this.
Check the length of the the string in the textbox. If length > 10 then change the background color of the textbox.
You can do that with Javascript.
One question though!
Do you want to count spaces as char? or do you want to only count char with out space?
<script>
function checkLength(textField) {
var strText = textField.value;
// if without spaces
strText = strText.replace(/^\s+|\s+$/g,"");
if(strText.length > 10) {
textField.style.backgroundColor = "#ff0000";
} else {
textField.style.backgroundColor = "#ffffff";
}
}
</script>
<input type="text" name="sometextfield" onkeyup="checkLength(this);" />
Hope this helps!
You need to do a little bit of research to dynamically change the count as the user is typing, but here is a good way to start:
<html>
<head>
<script type="text/javascript">
function getCount()
{
document.getElementById("txtCount").innerHTML = document.getElementById("myText").innerHTML.length;
}
</script>
</head>
<body>
<p id="txtCount">Mouse over the sun and the planets and see the different descriptions.</p>
<textarea id="myText" cols=60 rows=3 onmouseover="getCount();">hello</textarea>
</body>
</html>
Open a new text file and copy the above code and save it with an HTML extension then open it with the browser, and just hover the mouse pointer over the textarea, you will notice that a
text changes with the count of the characters inside the textarea control.
加载中,请稍侯......
精彩评论