时间戳

首页 > 解决方案 > 如何将它用于具有相同标签的多个输入

javascript - 如何将它用于具有相同标签的多个输入

问题描述

我需要这个替换器通过一个选择器将它用于许多输入。现在我使用不同的选择器和相同的代码，只是选择器不同 

var en = "qwertyuiop[]asdfghjkl;'zxcvbnm,./`QWERTYUIOP{}ASDFGHJKL:\"ZXCVBNM<>?~&";
var ru = "йцукенгшщзхъфывапролджэячсмитьбю.ёЙЦУКЕНГШЩЗХЪФЫВАПРОЛДЖЭЯЧСМИТЬБЮ,Ё?";
var alphabet = {};

for (var i = 0; i < en.length; i++) {
  alphabet[en[i]] = ru[i];
}

var InputReciever = document.getElementById("InputReciever");
InputReciever.addEventListener("input", function() {
  InputReciever.innerHTML = toRussianStr(this.value);
});

function toRussianStr(str) {
  return str.replace(/\S/g, function(match) {
    return alphabet[match] || match;
  });
}
<div class="form__option">
  <input placeholder="Город получателя" id="InputReciever" onfocus="this.placeholder=''" onblur="this.placeholder='Город получателя'" onkeydown="InputReciever.value=toRussianStr(InputReciever.value)" onchange="InputReciever.value=toRussianStr(InputReciever.value)"
    type="text" class="InputReciever field" autocomplete="off" />
</div>

标签： javascript

解决方案

input将事件侦听器中的代码从 更改input.innerHTML为input.value。
这是解释差异的答案。

例如。

var en = "qwertyuiop[]asdfghjkl;'zxcvbnm,./`QWERTYUIOP{}ASDFGHJKL:\"ZXCVBNM<>?~&";
var ru = "йцукенгшщзхъфывапролджэячсмитьбю.ёЙЦУКЕНГШЩЗХЪФЫВАПРОЛДЖЭЯЧСМИТЬБЮ,Ё?";
var alphabet = {};

for (var i = 0; i < en.length; i++) {
  alphabet[en[i]] = ru[i];
}

var input = document.querySelector("input");
input.addEventListener("input", function() {
  input.value = toRussianStr(input.value);
});

function toRussianStr(str) {
  return str.replace(/\S/g, function(match) {
    return alphabet[match] || match;
  });
}
<input class="input" type="text" placeholder="Город получателя" 
 autocomplete="off"/>

推荐阅读