Использование JavaScript для перезаписи входного значения с добавлением «#»

Question

Я хочу заменить содержимое введенного ввода, добавив перед ним знак «#», но во время записи пробелов он работает некорректно.

function mayus(texto) {
  var text = texto.value.replace('#', '');
  var words = text.split(" ");
  var newTexto = "";
  for (var i = 0; i < words.length; i++) {
    if (words[i].length > 0) {
      newTexto += "#" + words[i];
    } else {
      newTexto += " ";
    }
  }

  texto.value = newTexto;
};

<form class="form-horizontal" method="POST" action="addEvent.php">
  <div class="form-group">
    <label for="etiquetas" class="col-sm-2 control-label">Etiquetas</label>
    <div class="col-sm-10">
      <textarea name="etiquetas" class="form-control" id="etiquetas" placeholder="escriba y separe con espacio las etiquetas a usar" required onkeyup="mayus(this);" style="color: blue;">      </textarea>
    </div>
  </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-info" data-dismiss="modal">Cerrar</button>
    <button type="submit" class="btn btn-primary">Guardar</button>
  </div>
</form>

Answer 1

Ваше else утверждение не должно быть там, и вы можете упростить весь ваш метод, используя более функциональный подход. Также используйте событие input вместо события keyup, чтобы предотвратить визуальную задержку.

var previous

function mayus() {
  var texto = this.value
    .replace(/#/g, '') // removes ALL hashtags
    .split(/\s+/g)
    .filter(Boolean) // removes empty strings from array of words
    .map(function(word) {
      return '#' + word;
    })
    .join(' ');

  // add space if key was pressed and output would have been identical
  if (previous && texto === previous) {
    texto += ' ';
  }

  previous = this.value = texto;
}

<form class="form-horizontal" method="POST" action="addEvent.php">
  <div class="form-group">
    <label for="etiquetas" class="col-sm-2 control-label">Etiquetas</label>
    <div class="col-sm-10">
      <textarea name="etiquetas" class="form-control" id="etiquetas" placeholder="escriba y separe con espacio las etiquetas a usar" required oninput="mayus.call(this);" style="color: blue;"></textarea>
    </div>
  </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-info" data-dismiss="modal">Cerrar</button>
    <button type="submit" class="btn btn-primary">Guardar</button>
  </div>
</form>

Answer 2

Мы можем упростить вашу функцию. Сначала мы посмотрим, начинается ли значение с #, используя setsWith , и возвращаем ли мы его. Если нет, то мы добавим его в начало.

function mayus(texto) {
  let val = texto.value
  let result = val.split(' ').map(item => !item.startsWith('#') && item != '' ? '#' + item : item)
  texto.value = result.join(' ')
}

<form class="form-horizontal" method="POST" action="addEvent.php">
  <div class="form-group">
    <label for="etiquetas" class="col-sm-2 control-label">Etiquetas</label>
    <div class="col-sm-10">
      <textarea name="etiquetas" class="form-control" id="etiquetas" placeholder="escriba y separe con espacio las etiquetas a usar" required onkeyup="mayus(this);" style="color: blue;"></textarea>
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-info" data-dismiss="modal">Cerrar</button>
    <button type="submit" class="btn btn-primary">Guardar</button>
  </div>
</form>