引导单词文本框

Question

我想知道是否有任何方法可以做一个仅接受一个单词的引导程序文本框，或者如果没有任何方法，如果将多个单词放入文本中，则显示出错误消息盒子。

Answer 1

您可以使用简单的regexp这样的 /^w+$/检查值是否仅一个单词。要检查值，请在该输入上绑定到onkeyup或onchange事件：

var input = document.getElementById('text');
var error = document.getElementById('error');
input.onkeyup = function() {
  if (!input.value.match(/^w+$/)) {
    error.innerText = 'fill in only one word!';
  } else {
    error.innerText = '';
  }  
};

<input type="text" id="text">
<div id="error"></div>

Answer 2

不，没有。

如果您愿意，建议您使用键盘事件并进行event.target.value.trim().split(' ')，如果超过1个位置，则它具有1个字以上。

Answer 3

您可以在变化时处理该值。

$(document).ready(function() {
  $('#txt-one').change(function() {
    if (/ /g.test($.trim(this.value))) {
      console.log('You have entered more than one word!')
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="txt-one" type="text" class="form-control" />

Answer 4

Well Bootstrap默认情况下不提供此功能，但是您可以为其编写一个小脚本。请参考下面的链接，我写了一个小脚本，它应该能够为您提供实施的基本想法。

JS BIN Code

https://jsbin.com/duzevuleye/edit?html，output