时间戳

首页 > 解决方案 > 在应用拆分和连接功能并替换单词时将文本字段的值输出到另一个字段

javascript - 在应用拆分和连接功能并替换单词时将文本字段的值输出到另一个字段

问题描述

我正在尝试组合 2 个不同的 JS 代码，以便它们都能正常工作并执行所需的任务。

代码1：JS

let translator = {
"you": "yaseelf",
"I": "meseelf",
"quick": "fast",
"the": "dee"
};

var button = document.querySelector("#button_1");
var input = document.querySelector("#input");
var output = document.querySelector("#output_main");

button.addEventListener("click", () => {
let words = input.value.split(' ');
let translated = words.map(word => translator[word] || word);
output.innerHTML = translated.join(' ');
})

代码 1：HTML

<input id="input" type="text" value="Lets go to the park" />
<button id="button_1">translate</button>

<textarea id="output_main"></textarea>

上面的代码工作正常，输入字段的文本被替换为数组中描述的单词，例如“快速”被替换为“快速”。

当您按下按钮翻译按钮时执行上述代码。

我想要实现的是在输入字段中输入文本时，其输出应显示在 RUNTIME 的文本区域中，并且还应完成上述代码中完成的文本替换。所以不需要按翻译按钮来替换输入的文本并在 textarea 中输出

例子：

在输入字段中，用户输入“The Quick Brown Fox Jumps Over the Lazy Dog”，它应该在运行时被替换并显示在输出字段中，因此输出（不按下按钮）应该是：

“dee fast 棕狐跳过懒狗”

到目前为止，我已经使用以下代码在不同的文本字段上实现了运行时文本输出：

JS：

function enterAmt(ev) {
    document.getElementById('amt2').value =    ev.value;
}

HTML：

Amount 1<input type="text" id="input" name="amtname" size="5" maxlength="7" onkeyup="enterAmt(this)"><br><br>
Amount 2<textarea  name="amtname" size="5" maxlength="7" value="" id="amt2"></textarea>

我还是一个新手，所以不知道如何让这两个代码一起工作，但是，他们都单独完成这个功能，现在只需要帮助来组合它们。

简而言之，我希望在输入中输入的文本被替换（用我在上面的代码 1 中描述的单词）并在运行时显示在 textarea 中，即无需按下按钮或等待。

标签： javascripthtml

解决方案

您可以使用输入事件。

let translator = {
  "you": "yaseelf",
  "I": "meseelf",
  "quick": "fast",
  "the": "dee"
};

var input = document.querySelector("#input");
var output = document.querySelector("#output_main");

input.addEventListener("input", () => {
  let words = input.value.split(' ');
  let translated = words.map(word => translator[word] || word);
  output.value = translated.join(' ');
})
<input id="input" type="text" value="Lets go to the park" />
<textarea id="output_main"></textarea>

推荐阅读