如何使用 jquery 限制文本框中前导和尾随空格的使用？

Question

我有多个具有不同值的 input 字段。我可以编辑它们但不能为空（如果为空则显示警报）。当我编辑时，如果我用空白 spaces 编辑它们，我使用 trim 不允许 that.But，我可以用更多 spaces 编辑 input在 between.I 中的开头和结尾不需要这个。

如何实现以下？

a) 不应以 space.

开头

b)没有spaces后的单词，如果我有一个单词。

<input type="text" class="selector" value="new">
<input type="text" class="selector" value="old">
<input type="text" class="selector" value="newest">
<input type="text" class="selector" value="oldest">
<input type="text" class="selector" value="older">

$('.selector').on('blur',function () {
  var current_value = $.trim($(this).val());
  $(this).attr('value',current_value);
  console.log(current_value);
  if ($('.selector[value="' + current_value + '"]').not($(this)).length > 0 || current_value.length == 0 ) {
    $(this).focus();
    alert('You cannot use this');
  }
});

我的fiddle here

Answer 1

你应该使用这个

$(this).val(current_value);

而不是这个

$(this).attr('value', current_value);

Answer 2

检查 space 的第一个索引是否为 0 或者最后一个索引是否为字符串结尾然后显示警报。

添加以下条件：

if($(this).val().indexOf(" ") == 0 || $(this).val().lastIndexOf(" ") == ($(this).val().length -1) ){
       alert('You cannot use this');
    }

检查更新 fiddle

或片段:

$('.selector').on('blur', function() {
  var current_value = $.trim($(this).val());
  $(this).attr('value', current_value);
  console.log(current_value);
  if ($('.selector[value="' + current_value + '"]').not($(this)).length > 0 || current_value.length == 0) {
    $(this).focus();
    alert('You cannot use this');
  } else
  if ($(this).val().indexOf(" ") == 0 || $(this).val().lastIndexOf(" ") == ($(this).val().length - 1)) {
    alert('You cannot use this too');

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="selector" value="new">
<input type="text" class="selector" value="old">
<input type="text" class="selector" value="newest">
<input type="text" class="selector" value="oldest">
<input type="text" class="selector" value="older">

Answer 3

查看更新后的 fiddle

$('.selector').on('blur',function () {
    $(this).val($.trim($(this).val()));
    if($(this).val() == "") {
      alert("Empty values not allowed!");
      this.focus();
    }
});

解释：
首先 trim 值，然后检查是否为空。如果为空，则提高警报并聚焦框

Answer 4

我会使用输入模式属性：

<input type="text" class="selector" value="new" pattern="^[^\s]+(\s+[^\s]+)*$" />

找到正则表达式 in this answer。

Answer 5

删除开头的空格并获取值（删除字符串左右边缘的所有空格。）：

var value = $.trim($("input").val());

如何使用 jquery 限制文本框中前导和尾随空格的使用？

How to restrict use of Leading and Trailing spaces in the textbox using jquery?

html

javascript

jquery

alert

input