Как предотвратить переход курсора на следующую строку в фиксированном столбце textarea - PullRequest
Новая
       7

Как предотвратить переход курсора на следующую строку в фиксированном столбце textarea

1 голос
/ 30 октября 2019

У меня есть текстовое поле со следующим HTML ... 

 <textarea id="inputFreeContentArea" cols="16" rows="6" maxlength="96" wrap="hard"></textarea>

Когда пользователь вводит текст, я хочу, чтобы курсор остановился, когда в строке введено 16 символов, он не должен автоматически перемещатьсяна следующую строку, только если пользователь нажимает клавишу ввода. Кроме того, не должно быть возможности превышать 6 строк.

Как это можно сделать?

1 Ответ

1 голос
/ 30 октября 2019

Нет простого способа достичь того, что вы хотите, который потребовал бы много кода и проверки ввода. Вместо этого вы можете использовать оболочку и шесть input элементов, немного их стилизовать и собирать значения для скрытого ввода ex. в режиме реального времени или в форме валидатора. Как то так: 

function createTxtarea(parent, cols) {
  // Set the cols of the "textarea"
  const inputs = parent.querySelectorAll('input');
  inputs.forEach(input => input.setAttribute('maxlength', cols));
  // Add listener for Enter and ArrowUp/down keys
  const focusTo = {
    Enter: (e) => e.target.nextElementSibling,
    ArrowDown(e) {return this.Enter(e);},
    ArrowUp: (e) => e.target.previousElementSibling
  };
  parent.addEventListener('keydown', (e) => {
    const key = e.key;
    if (typeof focusTo[key] === 'function') {
      e.preventDefault();
      const prext = focusTo[key](e);
      if (prext) prext.focus();
    }
    // Collect the value here if needed
  });
}

createTxtarea(document.getElementById('area1'), 16);
.txtarea {
  border: 1px solid #ccc;
  padding: 1px;
  display: inline-block;
}
.txtarea input {
  border: none;
  display: block;
}
<form>
  <div id="area1" class="txtarea">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
  </div>
</form>

Суффикс входных имен с [] делает их доступными в виде массива на бэкэнде, так что вы можете легко извлечь одно значениес входов на сервере тоже.

Вы можете улучшить основной код. Можно легко создать несколько «txtareas», и при необходимости код можно преобразовать в ООП, и можно динамически создавать входы и даже родительский элемент.

Код игнорируется в телефонах, но заполнение«txtarea» все еще свободно говорит. Если вы добавите атрибуты maxlength в HTML, «txtarea» будет работать более свободно, чем настраиваемый реальный элемент textarea, если JS выключен.

...