Question

我有标签的输入字段。我们希望将标签限制为最多两个单词。我怎么能限制这个？

我正在考虑以下问题，但不确定是否有更简单的解决方案......

计算空格。如果用户键入然后命中空格，则假设左侧的所有内容都是单词。当用户再次输入并再次击中空格时，假设我们击中了两个单词。用户不能再向前键入，但可以退格以清除第二个单词（或整个输入）。
ajax使用str_word_count（）调用PHP脚本。我想每次用户按键时我都可以拨打电话，但这不会有点过分吗？也许在每个空间之后点击这个？

还有其他想法吗？

Answer 1

使用jquery（无服务器端代码）

尝试这种方式

var maxWords = 2;
jQuery('#txt1').keypress(function() {
    var $this, wordcount;
    $this = $(this);
    wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
    if (wordcount > maxWords) {
        alert("Max 2 words please");
        return false;
    } 
});

jQuery('#txt1').change(function() {
    var words = $(this).val().split(/\b[\s,\.-:;]*/);
    if (words.length > maxWords) {
        words.splice(maxWords);
        $(this).val(words.join(""));
        alert("Max 2 words please");
    }
});

HTML

<input type="text" id="txt1"/>

Answer 2

是的，每次进行更改时调用服务器方法都应该是前端验证（客户端）。

让Javascript处理这种验证是一种常见做法。您还可以在接收数据时添加服务器验证，以防止保存无效数据。

在Javascript中，您可以向输入添加一个类似于以下内容的侦听器：

var input_field = document.getElementById('id_of_the_input');
input_field.addEventListener('input', function()
{
  if(input_field.value.split(" ").length > 2){
    alert("You should input only 2 words"); //Change this for a better message
  }
});

Answer 3

这是一个演示如何在“即时”中限制输入元素中的单词的演示。您可以通过设置acceptWords的值来调整代码以接受一个或多个单词。

$(document).ready(function () {
  $('input').on('input', function () {
    var acceptWords = 2, // Count of words to accept
      boundary = [], // Stores the used word boundary characters
      value = this.value.replace(/\W/g, function (a) { // An array of actual words
        if (--acceptWords > 0) {
          boundary.push(a);
        }
        return ' ';
      }).split(' '),
      finalValue = value[0], // The final value to enter to the input
      n;
    if (boundary.length) { // If word boundary characters found
      for (n = 0; n < boundary.length; n++) {            
        finalValue += boundary[n] + value[n + 1]; // Form a final value
      }
    }
    this.value = finalValue; // Replace the value in the input
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />

代码只接受字母A-Z，a-z，数字和下划线作为单词的一部分。如果您需要在可接受的单词中支持其他字符，则可以相应地修改正则表达式。

如何将输入限制为最大和即时两个单词？

3 个答案: