javascript - textarea根據輸入不合法的內容變色

Question

在textarea中輸入內容，當裡面有不合法的字詞時把不合法的字變成紅色（警示顯示）。

#無法顯示該內容,有什麼好方法可以解決

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"></span>'); // 匹配符号
  textRefer.innerHTML = val; // 设置 HTML
});

Answer 6

textarea是純文本編輯控件，是不能再在裡面嵌套標籤，根據你的需求，提供以下思路，你可以在textarea中進行輸入，在後面再加一個p，層級在textarea下，p同步獲取文本框的內容，用js正規做驗證，如果字串中有敏感詞，則給該子字串加顏色。

Answer 7

用正規驗證吧，textarea標籤裡面不能直接寫font標籤吧

Answer 8

正規判斷,然後replace()掉存在錯誤的字元即可。