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

我们可以简化您的功能。首先，我们看一下该值是否已经使用startsWith以#开头，如果返回，则返回。如果没有，则将其添加到开头。

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>

Answer 2

您的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>

使用JavaScript重写添加“＃”的输入值

2 个答案: