Question

例如，如果输入类型www.abcd.com和激活事件的字符为。（点），我想根据特定的字符更改Clint在输入文件中写入的文本的颜色。会像这样改变： www。（绿色）abcd。（红色）com（黄色）。我希望每次特定字符出现时颜色都会改变两次，因为我希望它会出现两次。这是输入文件，我要在<input type="text" id="password_name"/>上激活该功能，我尝试while的{{1}}循环来检查input filed. Length 但这不起作用

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();"/>

更新：

请勿使用输入文字... 将DOM元素与属性contenteditable =“ true”

一起使用

像这样：

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')
}

输入特定字符时，在输入字段中进行Clint写入期间更改文本颜色

2 个答案: