輸入特定字符時，在輸入字段中進行Clint寫入期間更改文本顏色

Question

我想更改Clint在基於特定字符的輸入字段中編寫的文本的顏色，例如，如果輸入類型www.abcd.com和激活事件的字符為。（。dot），則顏色將像網址：www。（綠色）abcd。（紅色）com（黃色）。 我希望每次特定字符出現時顏色都會改變兩次，因為我希望它會出現兩次。 這里在輸入日提交的我想要的功能來激活<input type="text" id="password_name"/>我tryed while循環用於input filed. Length 檢查if var char=="."{ //and than changed color } input filed. Length ， if var char=="."{ //and than changed color }但這不起作用

Answer 1

可能是這樣的：

 function correct_color(_el){ if(_el.value == 'www.'){ _el.style.color = "green"; } if(_el.value == 'www.abcd.'){ _el.style.color = "red"; } if(_el.value == 'www.abcd.com'){ _el.style.color = "yellow"; } } 

 <input type="text" id="password_name" onchange="correct_color(this);" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/> 

更新：

不要使用輸入文本...使用屬性contenteditable =“ true”的DOM元素

像這樣：

 function correct_color(_el){ if(_el.value == 'www.'){ _el.style.color = "green"; } if(_el.value == 'www.abcd.'){ _el.style.color = "red"; } if(_el.value == 'www.abcd.com'){ _el.style.color = "yellow"; } var el_text = _el.innerText; var el_html = el_text.replace(new RegExp('www.','g'), '<span style="color: green">www.</span>'); el_html = el_html.replace(new RegExp('abcd.','g'), '<span style="color: red">abcd.</span>'); el_html = el_html.replace(new RegExp('com','g'), '<span style="color: yellow">com</span>'); _el.innerHTML = el_html; var selection = window.getSelection(); var range = document.createRange(); selection.removeAllRanges(); range.selectNodeContents(_el); range.collapse(false); selection.addRange(range); _el.focus(); } 

 .cls-div-for-multicolor-edit{ border-style:solid; border-width:1px; display:block; overflow:hidden; width:400px; height:18px; padding:2px; } 

 <code contenteditable="true" class="cls-div-for-multicolor-edit" onkeyup="correct_color(this);";></code> 

Answer 2

在輸入標簽中將javascript與onChange字段一起使用，例如：-HTML代碼

<input type="text" onChange="somefunction()" id="password_name"
  style="font-size:30px; color:black; position:relative; margin-right:20px;"/>

根據條件使用if語句，並使用以下方式更改其樣式：

function somefunction(){
  object=document.getElementById('password_name')
}