Html textarea - maxlength后的颜色字符
Posted
技术标签:
【中文标题】Html textarea - maxlength后的颜色字符【英文标题】：Html textarea - color characters after maxlength 【发布时间】：2014-06-17 01:26:16 【问题描述】：所以我有一个最大长度为 140 的 textarea，但是我现在想更改它，以便 140 之后的任何字符都是红色的（表示这些字符不会被保存）。
我想会需要一些 javascript/jquery，但我不知道从哪里开始。 我在网上查了一下，但似乎找不到任何东西。
有什么想法吗？
【问题讨论】：
为什么不使用计数器，一旦达到字符限制然后 textarea 会变成红色？只是一个想法。 Here is a starting point 你不能只改变 textarea 中某些字符的颜色，要么全有，要么全无，所以解决这个问题的唯一方法是使用两个不同颜色的 textarea，并且当达到一定长度时转移焦点，但是会有些复杂，也许一个 contentEditable 元素会更容易。 你有没有尝试过什么？你能和我们分享一下吗？ 只需设置 MaxLength，不要尝试重新发明***。做一些人们已经熟悉的事情。 没有很好地阅读这个问题。不，您不能部分更改字符。您可以全部更改，也可以不更改。 【参考方案1】：这是一个起点，使用两个文本区域。它需要更多的工作才能使其完美运行
$('#textarea2').on(
focus: function()
if (this.value.length >= 20) $('#textarea1').focus();
,
keyup: function()
if (this.value.length >= 20) $('#textarea1').focus();
$('#textarea1').val(this.value)
)
FIDDLE
【讨论】：
【参考方案2】：我不打算为你编写代码，但我这样做的方法是将输入到 textarea 中的内容动态复制到一个 div 中，除 textarea 之外，该 div 会显示给用户，或者通过使用一点 css/javascript，而不是 textarea。这就是 javascript 所见即所得 html 编辑器通常的工作方式
然后，您可以使用值的长度在 div 中超过所需最大值的字符周围放置一个跨度，并在该跨度上放置一个类。
【讨论】：
嘿，我现在真的很好奇这个代码......为了弄清楚这一点，我将有 2 个元素：1 个文本区域和 1 个 div。他们将被绝对定位（奇怪的措辞哈哈）在彼此之上。文本区域的文本将被隐藏，但在输入时会显示在 div 上。好吧，既然我认为我已经掌握了理论，我将尝试这个:) @AndrewAllbright 这里是一个快速粗略的实现作为起点jsfiddle.net/Rx77a 查看我对这个问题的更新答案 - 我创建了您所描述内容的非常粗略的实现。您不能在我的版本中突出显示或编辑太多内容，但我现在对 javascript WYSIWYG 编辑器的工作方式有了更好的了解。附言骆驼真棒。【参考方案3】：编辑：Evert 所描述的 Buggy vanilla 版本。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#llama
opacity: 0;
z-index: 1;
font: 14px Verdana, Arial, Helvetica, sans-serif;
padding: 4px !important;
#llamallama
color: orange;
z-index: 2;
word-wrap: break-word;
font: 14px Verdana, Arial, Helvetica, sans-serif;
padding: 4px !important;
.abspos
top:10px;
left:10px;
position: absolute;
</style>
</head>
<body>
<textarea id="llama" class="abspos" cols="30" rows="10"></textarea>
<div id="llamallama" class="abspos"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function()
var $llama = $('#llama');
var $llamallama = $('#llamallama');
$llamallama.width($llama.width());
$llamallama.height($llama.height());
$llamallama.on('click', function()
$llama.focus();
);
$llama.on('keyup', function()
if($(this).val().length > 14)
cleanText = $(this).val().slice(0, 14);
errorText = $(this).val().slice(14, $(this).val().length);
errorText = "<span class='error'>" + errorText + "</span";
textAreaText = cleanText + errorText;
$llamallama.html(textAreaText);
else
$llamallama.html($(this).val());
);
$llamallama.html($(llama).val());
);
</script>
</body>
</html>
【讨论】：
回首往事，我意识到我经历了一个美洲驼阶段。【参考方案4】：试试这个
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
function countChar(val)
var len = val.value.length;
if (len >= 500)
val.value = val.value.substring(0, 500);
val.css'border','1px solid red';
else
$('#charNum').text(500 - len);
val.css'border','1px solid black';
;
</script>
</head>
<body>
<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum"></div>
</body>
</html>
【讨论】：
以上是关于Html textarea - maxlength后的颜色字符的主要内容，如果未能解决你的问题，请参考以下文章
Html textarea - maxlength后的颜色字符
使用 Javascript 将 Textarea 的 MaxLength 设置为 50 [重复]
Chrome 在 textarea 中使用 maxlength 属性计数错误的字符