Javascript – Textbereich ändert die Farbe basierend auf illegalen Eingabeinhalten

Question

Geben Sie Inhalte in das Textfeld ein. Wenn darin illegale Wörter enthalten sind, werden die illegalen Wörter rot angezeigt (Warnungsanzeige).

Der Inhalt kann nicht angezeigt werden. Gibt es eine gute Möglichkeit, das Problem zu lösen?

Answer 1

這裡的現成工具jQuery Validation Plugin，是把整個輸入框變紅色虛線，正常則是黑色實線。這樣子或許也比較顧慮到色盲人士的使用權益

Answer 2

textarea是纯文本编辑控件，没法将里面的文字渲染成多种不同颜色，里面没法包含其他标签

Answer 3

这个还是用另一个标签同步输出内容和里面的正确或错误情况吧 这个是richtext了

Answer 4

font标签去除，如不合法也texarea设置color:#red

Answer 5

这就相当于一个简版的文本编辑器了。textarea同步获取输入的内容。

var textRefer = document.getElementById('text-refer'),
  textInput = document.getElementById('text-input');

textInput.addEventListener('keyup', function() {
  var val = textInput.value;
  val = val.replace(/[\n\t\s]+/g, ''); // 去除换行、Tab、空格
  val = val.replace(/([^\w+])/g, '<span class="red">$1</span>'); // 匹配符号
  textRefer.innerHTML = val; // 设置 HTML
});

Answer 6

textarea是纯文本编辑控件，是不能再在里面嵌套标签，根据你的需求，提供以下思路，你可以在textarea中进行输入，在后面再加一个p，层级在textarea下，p同步获取文本框的内容，用js正则做验证，如果字符串中有敏感词，则给该子字符串加颜色。

Answer 7

用正则验证吧，textarea标签里面不能直接写font标签吧

Answer 8

正则判断,然后replace()掉存在错误的字符即可。