Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.11.2019, 08:23
Новичок на форуме
Отправить личное сообщение для copkrg@gmail.com Посмотреть профиль Найти все сообщения от copkrg@gmail.com
 
Регистрация: 01.11.2019
Сообщений: 3

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

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

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

*-*-*-*--*

У меня при нажатий на определенные буквы на клавиатуре должно выходит внизу у Edit и только под этой буквой другой заминающей символ и также потом для выбора Вниз+Enter нажат и он вставился в это место в Edit
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2019, 09:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,587

copkrg@gmail.com, все твои "портянки" типа этой
Сообщение от copkrg@gmail.com
////////////////// Буква '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';
}
Запросто оформляется объектом...
var obj {
	'A': 'Á',
	'a': 'á',
	'G': 'Ǵ',
	'g': 'ǵ',
};
if (obj[int_chr]){
  m_modul.innerHTML=obj[int_chr];
  v_kz=obj[int_chr];
  m_modul.style.display='block';
}
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2019, 09:34
Новичок на форуме
Отправить личное сообщение для copkrg@gmail.com Посмотреть профиль Найти все сообщения от copkrg@gmail.com
 
Регистрация: 01.11.2019
Сообщений: 3

Спасибо конечно, но немного не то. Мне необходимо чтобы при наборе в Input именно под определенной буквой выходило блок, где можно выбрать другую букву. Например слово "Ozin" мне надо набрать как Óziń. Но на клавиатуре нет таких символов при вводе на латинице. И задача такая чтобы при вводе буквы "O" и буквы "n" должен быть выбор, выбрать букву "Ó" и "ń" строго под той буквы которую я ввожу. Так есть именно под курсоров ввода.
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2019, 13:23
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,587

Сообщение от copkrg@gmail.com
но немного не то
Это была твоя портянка... Я показал на что ее можно заменить.
У тебя есть и другие портянки.
Ответить с цитированием
  #5 (permalink)  
Старый 02.11.2019, 12:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,216

замена символов по Вниз+Enter
copkrg@gmail.com,
поставить курсор перед нужным символом или выделить текст.
<!DOCTYPE html>

<html>
  <head>
    <title>Untitled</title>
    <meta charset="utf-8" />
    <style type="text/css">
.main_module.show {
        display: block;
      }
.main_block{
  margin: 0 auto;
  background-color: #f2f2f2;
  border-radius: 20px;
  border: 1px solid #8aec82;
  width: 700px;
  height: 300px;
  margin-top: 100px;
  box-sizing: border-box;
  padding: 20px;
  box-shadow:  0 0 10px #8aec82;
}

H1{
  font-size: 24px;
  font-family: sans-serif;
}


.work_area{
  background-color: #8aec82;
  border-radius: 20px;
  height: auto;
  width: 100%;
}

.int_test{
  margin: 10px;
  font-size: 18px;
  border-radius: 20px;
  padding-left: 20px;
  border: 1px solid #bfbfbf;
  padding: 3px;
  width: 95%;
  box-sizing: border-box;

}
.int_test:focus{
    outline:none;
}

/*simbol module*/
.main_module{
  width: 270px;
  height: 60px;
  position: absolute;
  top: 250px;
  left: 460px;
  background-color: #eeeeee;
  border: 1px solid #8a8a8a;
  border-radius: 5px;
  display: none;
  text-align: center;
}

#div_char_up{
  width: 100%;
  height: 50%;
  float: left;
  border-radius: 5px 5px 0px 0px;
}

#div_char_down{
  width: 100%;
  height: 50%;
  border-radius: 0px 0px 5px 5px;
  float: left;
}

.sellect{
  background-color: yellow;
}

.p_char{
  font-size: 24px;
  margin: 0px;
  text-align: center;
}
    </style>
    <script src="https://unpkg.com/grapheme-splitter@1.0.4/index.js"></script>
  </head>

  <body>
    <div class="main_block">
      <h1>Проверка работоспособности вставки казахского шрифта</h1>
      <div class="work_area">
        <input
          id="int_test"
          class="int_test"
          type="text"
          name=""
          value=""
          placeholder="Введите текст"
         />
      </div>
      <p style="font-family:sans-serif; width:100%;text-align:center;margin-top:60px;">
        Демонстрация вставки дополнительных символов
      </p>
    </div>

    <div id="main_module" class="main_module">
      <div id="div_char_down">
        нажмите одновременно Вниз+Enter для замены символа/ов перед курсором на
        <span id="chr_kz" class="p_char">b</span>
      </div>
    </div>
    <script>
      const obj = {
        A: 'Á',
        a: 'á',
        G: 'Ǵ',
        g: 'ǵ',
        O: 'Ó',
        n: 'ń'
      };

      let keys = {},
        pos,
        newStr;
      let splitter = new GraphemeSplitter();
      function getChr(event) {
        pos = {start : this.selectionStart, end : this.selectionEnd};
        if (pos.start === void 0) return;
        if (pos.start === pos.end) pos.start--;
        let val = this.value;
        let str = val.slice(pos.start, pos.end);
        newStr = splitter.splitGraphemes(str).map(function(g) {
          return g in obj ? obj[g] : g
        }).join('');
        if (newStr != str) {
          chr_kz.innerHTML = newStr;
          main_module.classList.add('show');
          pos.end = pos.start + newStr.length;
          newStr = val.substring(0, pos.start) + newStr + val.substring(pos.end);

        } else main_module.classList.remove('show');
      }

      int_test.addEventListener('keydown', function(event) {
        const key = event.key;
        if (key === 'ArrowDown' || key === 'Enter') keys[key] = true;
        if (keys.ArrowDown === true && keys.Enter === true && main_module.classList.contains('show')) {
          event.preventDefault();
          int_test.value = newStr;
          main_module.classList.remove('show');
          int_test.focus();
          int_test.setSelectionRange(pos.end, pos.end);
        }
      });
      document.addEventListener('keyup', function(event) {
        const key = event.key;
        if (key === 'ArrowDown' || key === 'Enter') keys[key] = false;
      });
      int_test.addEventListener('input', getChr);
      int_test.addEventListener('mouseup', getChr);
    </script>
  </body>
</html>

Последний раз редактировалось рони, 02.11.2019 в 21:36.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск