[copkrg@gmail.com]

Добро утро! Можете помочь с проектом. У меня при нажатий на определенные буквы на клавиатуре должно выходит внизу у Edit другой заминающей символ. Я сделал в отдельном странице как смог но он сыроват. Тоже могу этот код закинуть.

var
  gl_pos=false;
  v_kz='Á',
  cur_pos=0;


window.onload=new_obj();

function new_obj(){
  var div=document.createElement('div');
  div.className = "main_module";
  div.id = "main_module";
  document.body.append(div);

  var $ = document, // shortcut
    head  = $.getElementsByTagName('head')[0],
    link  = $.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'cod.css';
    head.appendChild(link);
}



//Загружает в меню необходимые символы для выбора
function load_char(int_chr){
var m_modul=document.getElementById('main_module');

////////////////// Буква 'A'
if (int_chr=='A'){
  m_modul.innerHTML='Á';
  v_kz='Á',
  m_modul.style.display='block';
}

if (int_chr=='a'){
  m_modul.innerHTML='á';
  v_kz='á',
  m_modul.style.display='block';
}

////////////////// Буква 'G'
if (int_chr=='G'){
  m_modul.innerHTML='Ǵ';
  v_kz='Ǵ',
  m_modul.style.display='block';
}

if (int_chr=='g'){
  m_modul.innerHTML='ǵ';
  v_kz='ǵ',
  m_modul.style.display='block';
}

////////////////// Буква 'N'
if (int_chr=='N'){
  m_modul.innerHTML='Ń';
  v_kz='Ń',
  m_modul.style.display='block';
}

if (int_chr=='n'){
  m_modul.innerHTML='ń';
  v_kz='ń',
  m_modul.style.display='block';
}

////////////////// Буква 'O'
if (int_chr=='O'){
  m_modul.innerHTML='Ó';
  v_kz='Ó',
  m_modul.style.display='block';
}

if (int_chr=='o'){
  m_modul.innerHTML='ó';
  v_kz='ó',
  m_modul.style.display='block';
}

////////////////// Буква 'U'
if (int_chr=='U'){
  m_modul.innerHTML='Ú';
  v_kz='Ú',
  m_modul.style.display='block';
}

if (int_chr=='u'){
  m_modul.innerHTML='ú';
  v_kz='ú',
  m_modul.style.display='block';
}

////////////////// Буква 'Y'
if (int_chr=='Y'){
  m_modul.innerHTML='Ý';
  v_kz='Ý',
  m_modul.style.display='block';
}

if (int_chr=='y'){
  m_modul.innerHTML='ý';
  v_kz='ý',
  m_modul.style.display='block';
}

};


//Функция мониторить вводимые символы и взаимодействует с табличкой выбора шрифта
function sel(itxt){
  var m_modul2=document.getElementById('main_module'),
      s_temp=document.getElementById(itxt),

      m_pos=document.getElementById(itxt).getBoundingClientRect();

      m_modul2.style.top=m_pos.top+(m_pos.bottom-m_pos.top)+'px';
      m_modul2.style.left=m_pos.left+'px';
      m_modul2.style.width=(m_pos.right-m_pos.left)+'px';

getCaretPosition(itxt);


  //Клавиша вверх
  if (event.keyCode==38){
    m_modul2.classList.remove("sellect");
    gl_pos=false;
    event.preventDefault();
    return false;
  };

  //Клавиша вниз
  if (event.keyCode==40){
    m_modul2.classList.add("sellect");
    gl_pos=true;
    event.preventDefault();
    return false;
  };

  //отследижение нажатия на center
  if (event.keyCode == 13) {
  if (gl_pos == true) {
    s_temp.value = s_temp.value.slice(0, cur_pos - 1) + s_temp.value.slice(cur_pos);
    document.getElementById(itxt).value = s_temp.value + v_kz;
    gl_pos = false;
    event.preventDefault();
  };
  m_modul2.classList.remove("sellect");
};

  //Скрывает модуль если нет совпадении на казахские символы
  m_modul2.style.display='none';

  if (event.key=='A') load_char('A');
  if (event.key=='a') load_char('a');

  if (event.key=='G') load_char('G');
  if (event.key=='g') load_char('g');

  if (event.key=='N') load_char('N');
  if (event.key=='n') load_char('n');

  if (event.key=='O') load_char('O');
  if (event.key=='o') load_char('o');

  if (event.key=='U') load_char('U');
  if (event.key=='u') load_char('u');

  if (event.key=='Y') load_char('Y');
  if (event.key=='y') load_char('y');
};



//Позиция курсора Input  посимвольно
function getCaretPosition(obj){
    var cursorPos = null,
    s_temp='';

    if (document.selection){
        var range = document.selection.createRange();
        range.moveStart('textedit', -1);
        cursorPos = range.text.length;
    }
    else
    {
        cursorPos = obj.selectionStart;
    };

    cur_pos=cursorPos;

}

css

#int_test{
  position: absolute;
  font-size: 18px;
  padding-left: 20px;
  padding: 3px;
  width: 200px;
  margin:250px;
}

.main_module{
  position: absolute;
  text-align: center;
  font-size: 30px;
  background-color: #eeeeee;
  border: 1px solid #8a8a8a;
  display: none;
  box-sizing: border-box;
}

.sellect{
  background-color: yellow;
}

Если смотреть на мой код то там просто позиций указаны относительно x/y и это не правильно работает при выставление на страницу проекта.

http://demo.artweb.kz/qazaq/autopas/index.html - здесь надо выбирать символ стрелкой Вниз+Enter.

*-*-*-*--*

У меня при нажатий на определенные буквы на клавиатуре должно выходит внизу у Edit и только под этой буквой другой заминающей символ и также потом для выбора Вниз+Enter нажат и он вставился в это место в Edit