当前位置：文江博客话题详情

当值超过字符最大值时如何更改文本框的颜色

发布于 2024-11-16 09:35:00 字数 155 浏览 0 评论 0原文

我有一个宽度不同的文本框，假设文本框中可见字符的最大数量是 10。现在我希望当用户输入超过 10 个字符时，文本框的颜色会发生变化。

要检查所有值，用户必须将鼠标悬停在其上。那么如何根据给定条件更改文本框的颜色。

谢谢或者请告诉我如何查找文本框中没有可见字符

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

铃予 2024-11-23 09:35:00

如果您熟悉 jQuery，可以通过以下方法解决：

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');
                    }
            });

我真的不知道“没有可见”字符。

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.

回复收藏 0 原文

心房的律动 2024-11-23 09:35:00

您必须使用 JavaScript 来执行此操作。

检查文本框中字符串的长度。如果长度> 10.然后更改文本框的背景颜色。

回复收藏 0 原文

成熟稳重的好男人 2024-11-23 09:35:00

您可以使用 JavaScript 来做到这一点。

不过还有一个问题！

您想将空格算作字符吗？或者你只想计算没有空间的字符？

<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);" />

希望这有帮助！

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!

回复收藏 0 原文

原谅我要高飞 2024-11-23 09:35:00

您需要做一些研究才能在用户键入时动态更改计数，但这是一个很好的开始方法：

<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>

打开一个新的文本文件并复制上述代码并使用 HTML 扩展名保存，然后使用在浏览器中，只需将鼠标指针悬停在文本区域上，您就会注意到

文本随着文本区域控件内的字符数而变化。

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.

回复收藏 0 原文

~没有更多了~