Показать сообщение отдельно
  #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.
Ответить с цитированием