0

Здравствуйте я новичок в 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" на "и" и так далее.

1 ответ 1

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);
}
<input id="input" />

12
  • Спасибо за направление, только мне сей равно не понятно как мне запихнуть это в 2 функции и соединить с кнопками button, и при нажатии на кнопку English или Russian в текстовом поле будут происходить изменения, при набирании в него текста пользователями.
    – Vitalii
    15 июл 2017 в 8:57
  • @Vitalii обновил ответ
    – Darth
    15 июл 2017 в 9:07
  • Почему text константа? :)
    – user245150
    15 июл 2017 в 9:11
  • @Duoxx потому что после объявления эта переменная не изменяется
    – Darth
    15 июл 2017 в 9:17
  • Я понимаю, но почему не переменная
    – user245150
    15 июл 2017 в 9:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.