部分 input.value 樣式？

Question

我必須遵循代碼： JSFiddle – 我有一個 HTML 輸入和一個按鈕。 – 單擊按鈕時，正在運行 function，這會將 input.value 更改為以下文本： "Black Yellow" 。

我希望黃色這個詞是Yellow的。 color: yellow

我在堆棧溢出上發現了一些東西，但沒有什么對我真正有用，從我讀過的內容來看，我認為這可能有點棘手，但我真的需要這個工作，所以我非常歡迎任何形式的輸入！ – 西蒙

HTML

<button onclick="myFunction()"> Run </button>
<input name="input1" id="myInput">

JS

function myFunction() {
    document.querySelector("#myInput").value = "Black Yellow";
}

Answer 1

正如其他人所說，這不是一件容易的事。 我在反應中做了類似的事情，但這與在普通的 javascript 中完全不同。

以下是創建自己的輸入字段的方法：

Javascript：

const input = {
    element: document.getElementById("input"),
    focusing: false,
    value: ""
} 

function checkTarget(e) {
    if (e.target !== input.element){
        input.focusing = false
        return
    }
    input.focusing = true
    console.log(input.focusing)
}

function handleKey(e) {
    if (e.isComposing || e.keyCode === 229 || !input.focusing) {
        return;
    }
    input.value += e.key
    input.element.innerText = input.value
}

function handleClick() {
    let texts = input.value.split(" ")
    let span1 = document.createElement("span")
    let span2 = document.createElement("span")
    span1.innerText = texts[0] + " "
    span2.innerText = texts[1]
    span2.style.color = "yellow"
    input.element.innerText = ""
    input.element.appendChild(span1)
    input.element.appendChild(span2)
}

document.addEventListener("click", checkTarget)
document.addEventListener("keydown", handleKey);

HTML：

<button id="button"onclick="handleClick()"> Run </button>
<div id="input">

</div>

CSS：

#input {
  width: 150px;
  height: 20px;
  border: #777 1px solid;
  border-radius: 2px;
  display: inline-block;
}

在你的fillde中運行它，讓我知道它是否有效。

當然，如果"input"字段中只有 2 個單詞，這將起作用。 要獲得更多單詞，您需要調整此代碼。

我必須做的反應是 - 創建一個文本區域，以不同的顏色顯示每個單詞（彩虹輸入）。 所以我創建了一個包含所有彩虹 colors 的數組，創建了一個 rand function 來選擇其中一個，然后我做了和我在這里做的類似的事情。 我在從split(" ")獲得的數組上使用了map ，然后返回了一個帶有文本顏色內聯樣式的span 。 最后在 div 中渲染了整個垃圾。 那是容易的部分。 編輯是困難的部分（處理刪除、退格、制表符等）。 那是我放棄並從 github 中偷走一個組件的時候。

Answer 2

這不是一件容易的事。 您目前無法控制 HTML 中的文字顏色。 您需要使用 2 個輸入元素以某種方式創建自己的輸入。 對於每種顏色都有一個輸入。 但正如我所說，它可能會變得復雜。

 function renderFakeInput(input, colors) { input.style.display = "none"; const fakeInput = document.createElement("div"); fakeInput.classList.add("fake-input"); fakeInput.addEventListener("click", () => renderRealInput(input, colors, fakeInput)); for (const color of colors) { const word = document.createElement("div"); word.textContent = color; word.style.color = color; fakeInput.appendChild(word); } input.parentElement.appendChild(fakeInput); } function renderRealInput(input, colors, fakeInput) { const onBlur = () => { input.removeEventListener("blur", onBlur); renderFakeInput(input, input.value.split(" ")); }; input.style.display = ""; input.value = colors.join(" "); input.focus(); input.addEventListener("blur", onBlur); fakeInput.remove(); } const colorString = "Black Yellow"; const colors = colorString.split(" "); const inputs = Array.from(document.getElementsByClassName("multi-color")); for (const input of inputs) { renderFakeInput(input, colors); }

 .fake-input { display: flex; flex-direction: row; }

 <div> <input class="multi-color" /> </div> <div> <input class="multi-color" /> </div>