如何使用 javascript 更改输入字段中特定选择文本的 css 属性

How to change css property of the particular selection text in a input field using javascript

本文关键字：选择 文本 属性 css javascript 何使用 字段 输入      更新时间：2023-09-26

这是我的示例演示：

<span style="color: blue; text-decoration: underline;">CHANGE</span>
<form>
    <textarea >hello, world</textarea/>
</form>

我想更改所选文本颜色（所选文本将是动态的）输入字段。颜色变化可以根据：

他

：红色（如果他选择了）
你好：蓝色（如果选择了你好），依此类推。
单击更改文本后，所选颜色将更改。

您无法在文本区域中执行此操作。任何与文本相关的属性都将影响文本区域中的整个文本。

按照以下方式，您可以动态更改p元素的文本颜色。

对p标记使用contenteditable="true"

function getText() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.selection) { 
         return document.selection.createRange().text; 
     }
    return '';
}
document.getElementById('btnClick').addEventListener('click', function() 
{
  if(getText() == "hello")
   	document.execCommand('foreColor', false, "#ff0000") 
  else
    document.execCommand('foreColor', false, "#0000ff") 
        
});
<button id="btnClick">Change Color</button>
<p id="text1" contenteditable="true">hello, world</p>

这样，您可以检查文本是否为hello，然后将所选文本更改为红色。否则，对于另一个文本，请将其更改为蓝色。

您可以根据需要更改条件。

在此处查看我接受的答案以获取更多详细信息。

使用contenteditable='true'而不是textarea

试试这个：

document.getElementById('handler').addEventListener('click', function() {
  document.getElementById('red').classList.add('red');
  document.getElementById('blue').classList.add('blue');
});
.red {
  color: red;
}
.blue {
  color: blue;
}
<span style="color: blue; text-decoration: underline;" id='handler'>CHANGE</span>
<form>
  <div contenteditable='true'>
    <span id='red'>hello, </span>
    <span id='blue'>world</span>
  </div>
</form>

按照@rayon Dabre的建议更新你的html

.HTML

<span style="color: blue; text-decoration: underline;" id='handler'>CHANGE</span>
<div contenteditable='true'>
    <span id='txt'>hello, world</span>
</div>

.JS

document.getElementById('txt').addEventListener('mouseup', function(e){
    var selection = (window.getSelection) ? window.getSelection().toString() : document.selection.createRange().text;
    this.textContent = this.textContent; //remove child tags before wrap
    wrapWithTag(this, selection ? selection : "");
}, false);
var textAndColor = {//Object to update color as per selected text
    "he": "red",
    "hello": "blue",
    "world": "yellow"
};
function wrapWithTag(stringElement, txtToWrap) {
    if(!txtToWrap) {return;}
    var originalTxt = stringElement.textContent;
    var beforeString = originalTxt.substring(originalTxt.indexOf(txtToWrap), 0);
    var AfterString = originalTxt.substring(originalTxt.indexOf(txtToWrap) + txtToWrap.length);
    if(textAndColor[txtToWrap]) {
        stringElement.innerHTML = beforeString + "<span id='highlight' class=' "+ textAndColor[txtToWrap] +"'>" + txtToWrap + "</span>" + AfterString;
    }
}
document.getElementById('handler').addEventListener('click', function(e){
    var textContainer = document.getElementById('highlight');
    if(textContainer) {
        textContainer.style.color = textContainer.className;
    }
}, false);
相关文章：