javascript - textarea根據輸入不合法的內容變色
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-14 10:51:41
0
8
934

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

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

女神的闺蜜爱上我
女神的闺蜜爱上我

全部回覆(8)
代言

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

Peter_Zhu

textarea是純文字編輯控件,沒辦法將裡面的文字渲染成多種不同顏色,裡面沒辦法包含其他標籤

漂亮男人

這個還是用另一個標籤同步輸出內容和裡面的正確或錯誤情況吧 這個是richtext了

黄舟

font標籤去除,如不合法也texarea設定color:#red

女神的闺蜜爱上我

這就等於是一個簡版的文字編輯器了。 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
});

阿神

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

为情所困

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

阿神

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!