Question

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

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

由于要么请告诉我如何在文本框中找不到可见字符

Answer 1

你必须使用javascript来执行此操作。

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

Answer 2

你可以用Javascript做到这一点。

虽然有一个问题！

你想把空格算作char吗？或者你只想用空间计算char？

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

希望这有帮助！

Answer 3

您需要做一些研究，以便在用户输入时动态更改计数，但这是一个很好的开始方式：

<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扩展名保存，然后用浏览器打开它，只需将鼠标指针悬停在textarea上，您就会注意到

文本更改textarea控件内的字符数。

Answer 4

如果您熟悉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');
                    }
            });

我真的不知道“没有可见的”角色。

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

4 个答案: