如何向输入框添加单个字母过滤器[关闭]答案

【问题标题】：How to add a single letter filter to input box [closed]如何向输入框添加单个字母过滤器[关闭]
【发布时间】：2021-08-04 17:20:40
【问题描述】：

我希望能够在输入框中输入“i”并获得“！”的输出，我也希望使用多个字母 [例如：i = ! | t = 7]，我希望在js中添加新字母容易，输出会有输出的id，像这样<div id="output"></div>thx，hiiii

【问题讨论】：

到目前为止你尝试了什么？
没什么，我什至不知道要开始，这就是我问的原因。
从添加事件监听器、读取文本和输出文本开始
哦，我明白了，所以为“i”添加一个事件监听器，然后运行 document.getelementbyid("output").innerHTML += "!";对吗？
如果您想知道为什么会收到如此多的反对票，请不要要求我们在没有任何努力或任何代码尝试的情况下为您执行此操作。请注意，Stackoverflow 不是免费的代码编写服务，并且在发布任何内容之前也要进行一些研究。还建议阅读 Stackoverflow 的 How do i ask a good question? 和 What questions are suitable? 部分。祝你旅途愉快，祝你有美好的一天

标签： javascript html input

【解决方案1】：

这是一个带有两个输入框的 sn-p：顶部的一个定义替换规则，底部的一个接受要处理的任何文本输入：

function mkdict(){
 dict={};
 key.value.split(",").forEach(kv=>{
  let [k,v]=kv.split("=");
  dict[k]=v;
 }); transform();
}
  
function transform(){
 out.textContent=text.value.split("").map(c=>dict[c]||c).join("");
}

var dict;
mkdict();
key.addEventListener("input",mkdict);
text.addEventListener("input",transform);

<input type="text" value="i=!,t=7" id="key"><br>
<input type="text" id="text">
<div id="out"></div>

为了简洁起见，我利用了具有id 属性的DOM 元素在具有id 的全局名称空间中直接可见的事实。这不被认为是好的（=可持续和可维护的）风格。相反，你应该使用类似的东西：

const key=document.getElementById("key")

【讨论】：

你能做到吗，所以你必须在“i！”之间加上一个=符号?和一个“，”之后？
瞧。只是改变了我的答案...

【解决方案2】：

如果你想将你的字母映射到输出值，你可以使用一个对象

例如

const yourObject = { 
  "i": "!", 
  "t": "7" 
};

为输入框添加一个事件监听器并通过对象运行它的值以获得映射的输出，即你的对象[input.value]，然后你可以在你的 div 中显示它

【讨论】：

空间没有任何帮助？

【解决方案3】：

我已经添加了一个工作演示，您可以在obj添加更多键值：

const input = document.querySelector("#input");
const result = document.querySelector("#result");

const obj = {
  i: "!",
  t: "7",
  7:"t",
  4:"A",
}

input.addEventListener("input", (event)=>{
  const key = event.target.value;
  result.innerText += (obj[key] || key);
  input.value = "";
});

<input type="text" id="input"/>
<br>
<b>Result:</b>
<span id="result"></span>

【讨论】：

我可以添加一个清除按钮吗？
你可以设置result.innerText = ""。