JS авто. замена текста в текстовом поле

552

16 июля 2017, 13:08

Здравствуйте я новичок в JS, не подскажите как реализовать такую идею. Есть 1но поле для текста, 2 кнопки переключения раскладки иностранного алфавита, как соединить 2 кнопки с 1ним полем для текста при нажатии на кнопку будет вводится своя раскладка.

   <input id="" name="results" type="text" autofocus>
   <button type="submit">English</button>
   <button type="submit">Russian</button>
   <script type="text/javascript">
     document.getElementById('english').addEventListener('input',function(n){
 n.target.value = n.target.value.split('a').join('а');
 n.target.value = n.target.value.split('i').join('и');
 n.target.value = n.target.value.split('u').join('у');
 n.target.value = n.target.value.split('e').join('э');
 n.target.value = n.target.value.split('o').join('о');
 n.target.value = n.target.value.split('k').join('к');
});
document.getElementById('russian').addEventListener('input', function(e){
 n.target.value = n.target.value.split('а').join('a');
 n.target.value = n.target.value.split('и').join('i');
 n.target.value = n.target.value.split('у').join('u');
 n.target.value = n.target.value.split('э').join('e');
 n.target.value = n.target.value.split('о').join('o');
 n.target.value = n.target.value.split('к').join('k');
 });
 </script>

Так же мне интересно можно ли заменить такой громоздкий код как

  e.target.value = e.target.value.split('и').join('i');

на более легкую версию, а то если алфавит будет из 33х строк такой длинны то такой код будет слишком громоздкий. Или возможно такие вещи делаются не через split? Мне главное что бы при введении текста буквы менялись сразу автоматически например "i" на "и"　и так далее.

Answer 1

Конечно же это делается с помощью replace

function translit(lang){ 
  const matrix = [["щ","shh"],["ш","sh"],["ч","ch"],["ц","cz"],["ю","yu"],["я","ya"],["ё","yo"],["ж","zh"],["ъ","``"],["ы","y'"],["э","e`"],["а","a"],["б","b"],["в","v"],["г","g"],["д","d"],["е","e"],["з","z"],["и","i"],["й","j"],["к","k"],["л","l"],["м","m"],["н","n"],["о","o"],["п","p"],["р","r"],["с","s"],["т","t"],["у","u"],["ф","f"],["х","x"],["ь","`"]]; 
 
  let text = input.value; 
  matrix.forEach(repl => text = text.replace(repl[(lang === 'ru')%2 ], repl[(lang === 'eng')%2])); 
  input.value = text; 
}

<input id="input" value="Съешь ещё этих мягких французских булок, да выпей же чаю!" /> 
<button onclick="translit('eng')">English</button> 
<button onclick="translit('ru')">Russian</button>

Если замены у вас строго 1 к 1 символу, то можно сделать так (или 1 к нескольким, но только в одну сторону будет работать):

const ru_en = {"щ":"shh","ш":"sh","ч":"ch","ц":"cz","ю":"yu","я":"ya","ё":"yo","ж":"zh","ъ":"``","ы":"y'","э":"e`","а":"a","б":"b","в":"v","г":"g","д":"d","е":"e","з":"z","и":"i","й":"j","к":"k","л":"l","м":"m","н":"n","о":"o","п":"p","р":"r","с":"s","т":"t","у":"u","ф":"f","х":"x","ь":"`"} 
input.onkeypress = e => { 
    e.preventDefault(); 
    input.value += ru_en[String.fromCharCode(e.which || e.keyCode)] || String.fromCharCode(e.which || e.keyCode); 
}