Question

我有一个html代码，我希望将在输入textbox中键入的文本作为输入，保存到对象中，并在键入时匹配为keyword在模拟的textarea中。

示例：

<tr>
  <td>KEYWORD:</td>
  <td><input type="text" name="key_word" value="" id="tm"></td>
</tr>

我在其中键入文本的文本区域：

<div class="container">
  <textarea id="myTextArea"></textarea>
  <div class="backdrop">
    <div class="colors">
    </div>
  </div>
</div>

JavaScript代码：

const color = 
{
  "connected ..":"green",
  "connected .....": "green", 
  "connection failure .....": "red"
};

let textArea = document.getElementById("myTextArea");
let colorsArea = document.querySelector(".colors");
let backdrop = document.querySelector(".backdrop");

// Event listeners.

textArea.addEventListener("input", function()
{
    colorsArea.innerHTML = applyColors(textArea.value);
});

textArea.addEventListener("scroll", function()
{
    backdrop.scrollTop = textArea.scrollTop;
});

function applyColors(text)
{
    let re = new RegExp(Object.keys(color).join("|"), "gi");

    return text.replace(re, function(m)
    {
        let c = color[m.toLowerCase()];
        return `<spam style="color:${c}">${m}</spam>`;
    });
}

因此，情况如下：当我在输入文本框中键入keyword时，例如"connected"，则应将此"connected"关键字作为匹配条件传递给以上的javascript。因此，以后每当我在textarea中键入关键字时，keyword都应该在textarea中变成绿色。

这是我想要存储文本框值的代码，因此我可以摆脱硬编码数据：

const color = 
{
  "connected ..":"green",
  "connected .....": "green", 
  "connection failure .....": "red"
};

Answer 1

我建议您遍历对象键，并对正则表达式使用FadeAnim.setAnimationListener(new AnimationListener() { @Override public void onAnimationEnd(Animation arg0) { Intent mySuperIntent = new Intent(MainActivity.this, Main2Activity.class); startActivity(mySuperIntent); finish(); } });或contains方法并从对象中返回颜色。

您可以解决这个问题：

test

Answer 2

您可以创建一个Add按钮，以将新的关键字添加到keywords和colors的映射中。您将需要在该新按钮上处理click事件，并在其中添加扩展"map"的逻辑。像这样：

HTML：

<table>
  <tr>
    <td>Keyword:</td>
    <td>
      <input type="text" name="key_word" id="tm">
    </td>
    <td>
      <button type="button" id="addBtn">Add</button>
    </td>
  </tr>
</table>

Javascript：

// Logic to add new keyword:

let addButton = document.getElementById("addBtn");

addButton.addEventListener("click", function()
{
    let newKey = document.getElementById("tm").value;

    if (newKey.trim())
        colorMap[newKey] = "green";
});

关于先前的答案，我对以下问题做了解答：How to change color of text in a textarea。我还将添加一个带有选项的select来选择颜色，这将在下一个代码中生成：

// Initialization.

const colorMap = {/* EMPTY */};
let textArea = document.getElementById("myTextArea");
let customArea = document.querySelector(".custom-area");
let backdrop = document.querySelector(".backdrop");

// Event listeners.

textArea.addEventListener("input", function()
{
    customArea.innerHTML = applyColors(textArea.value);
});

textArea.addEventListener("scroll", function()
{
    backdrop.scrollTop = textArea.scrollTop;
});

function applyColors(text)
{
    let re = new RegExp(Object.keys(colorMap).join("|"), "gi");

    return text.replace(re, function(m)
    {
        let c = colorMap[m.toLowerCase()];
        return `<spam style="color:${c}">${m}</spam>`;
    });
}

// Logic to add new keyword:

let addButton = document.getElementById("addBtn");

addButton.addEventListener("click", function()
{
    let newKey = document.getElementById("tm").value;
    let newColor = document.getElementById("colorSel").value;
    
    if (newKey.trim() && newColor)
    {
        colorMap[newKey] = newColor;
        textArea.dispatchEvent(new Event("input"));
    }
});

.backdrop, #myTextArea {
  font: 12px 'Open Sans', sans-serif;
  letter-spacing: 1px;
  width: 300px;
  height: 100px;
}

#myTextArea {
  margin: 0;
  position: absolute;
  border-radius: 0;
  background-color: transparent;
  color: transparent;
  caret-color: #555555;
  z-index: 2;
  resize: none;
}

.backdrop {
  position: absolute;
  z-index: 1;
  border: 2px solid transparent;
  overflow: auto;
  pointer-events: none;
}

.custom-area {
  white-space: pre-wrap;
  word-wrap: break-word;
}

<table>
  <tr>
    <td>Keyword:</td>
    <td>
      <input type="text" name="key_word" id="tm">
    </td>
    <td>Color:</td>
    <td>
      <select id="colorSel">
        <option value="green">Green</option>
        <option value="orange">Orange</option>
        <option value="red">Red</option>
      </select>
    </td>
    <td>
      <button type="button" id="addBtn">Add</button>
    </td>
  </tr>
</table>

<hr>

<div class="container">
  <div class="backdrop">
    <div class="custom-area">
        <!-- Cloned text with colors will go here -->
    </div>
  </div>
  <textarea id="myTextArea"></textarea>
</div>

如何获取文本框值作为输入并存储它们以稍后在文本区域中检测匹配项

2 个答案: