Bootstrap текстовое поле одного слова

Question

Мне было интересно, есть ли способ создать текстовое поле начальной загрузки, которое принимает только одно слово, или нет способа показать сообщение об ошибке, если в текстовое поле вставлено более одного слова.

Answer 1

По умолчанию начальная загрузка не обеспечивает эту функцию, но вы можете написать для нее небольшой скрипт. Пожалуйста, обратитесь по ссылке ниже, я написал небольшой скрипт, который должен дать вам основную идею реализации.

JS BIN Code

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

Answer 2

нет, нет.

если вы хотите, я бы предложил вам использовать событие keyup и взять ваш 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

Вы можете использовать простое регулярное выражение, подобное этому /^\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>