搜索字段中的最大字符数答案

【问题标题】：Maximum number of characters in search field搜索字段中的最大字符数
【发布时间】：2015-10-13 06:12:12
【问题描述】：

我有搜索字段，但没有典型的提交按钮。它看起来像这样：

HTML：

<div class="input-group">
    <input type="text" class="form-control" name="keyword" id="searchbox" onkeypress="return checkLength()"/>
    <span class="btn btn-primary input-group-addon" onclick="checkLength()"><i class="fa fa-search"></i></span>
</div>

我只为提交按钮添加了span 而不是input 元素。如何验证用户键入或输入的字符是否不少于 2 个？如果用户只输入 1 个字符然后按下该搜索按钮或只是按回车键，则搜索字段底部应该有一条红色错误消息，说明“关键字应不少于 2 个字符”或类似的内容。

我试过这段代码，但它不起作用：

function checkLength(){
    var textbox = document.getElementById("searchbox");
    if(textbox.value.length <= 10 && textbox.value.length >= 2){
        alert("success");
    } else {
        alert("Keyword should be not less than 2 characters");
        $(document).keypress(function (e) {
            var keyCode = (window.event) ? e.which : e.keyCode;
            if (keyCode && keyCode == 13) {
                e.preventDefault();
                return false;
            }
        });
    }
}

需要帮助。谢谢。

编辑：

输入关键字后按回车键，页面会重定向到搜索结果页面，但如果输入的关键字不包含2个或更多字符，则应防止发生这种情况，因此在下方显示红色文本错误消息搜索字段。怎么做？

【问题讨论】：

为什么禁用回车键？我还看到您使用的是 jQuery，而不是为什么将它与 vanilla js 混合使用？也避免使用内联事件处理程序。
对不起，我忘了告诉你，这是我最早使用 jquery 的时间之一。我不知道我在做什么。我该怎么做？谢谢。

标签： javascript jquery html css

【解决方案1】：

您可以在 HTML5 输入中使用模式属性，并且可以仅使用 CSS 验证文本：

.error {
  display: none;
  font: italic medium sans-serif;
  color: red;
}
input[pattern]:required:invalid ~ .error {
  display: block;
}

<form>
  <input type="text" name="pattern-input" pattern=".{2,}" title="Min 2 characters" required>
  <input type="submit">
  <span class="error">Enter at least two characters</span>
</form>

这里是Fiddle

注意：这适用于所有现代浏览器，IE9 和更早版本似乎不支持 :invalid、:valid 和 :required CSS 伪类，而 Safari 仅部分支持。

【讨论】：

+1 ... “IE9 和更早版本似乎不支持” 是的，但是有 polyfills（“shivs, shims”）。此外，HTML5 <button type="submit"> 允许使用任何可以轻松使用放大镜图片的标记。
这很好，但是可以在按回车键或搜索按钮后显示错误消息吗？
是否也可以验证当用户没有输入任何内容时，它会显示下面的错误消息？
是的，我已经更新了用于验证空输入的代码 sn-p。

【解决方案2】：

可以使用 Jquery Validation 插件。很简单。

$(document).ready(function(){
    $("#registerForm").validate();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id='registerForm' name='registerForm' method='post' action='' >   <p>
   Search <input type='text' name='name' id='name'  minlength="2"     class='required' />
   </p>
</form>

参考： http://jqueryvalidation.org/documentation/

【讨论】：

【解决方案3】：

尝试使用 .previousElementSibling 选择 span .nodeName 选择 input 设置 div .innerHTML 为空字符串 "" 或 "Keyword should be not less than 2 characters" ，使用 input 事件

var msg = document.getElementById("msg");

function checkLength(elem) {
  var el = elem.type === "text" ? elem : elem.previousElementSibling
  , len = el.value.length < 2;
  msg.innerHTML = len ? "Keyword should be not less than 2 characters" : "";
  $(el).one("input", function() {
    checkLength(this)
  })
}

#msg {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group">
  <form>
    <input type="text" class="form-control" name="keyword" id="searchbox" />
    <input type="button" class="btn btn-primary input-group-addon" onclick="checkLength(this)" value="X" />
  <div id="msg"></div>
  </form>
</div>

【讨论】：

这很好，但是可以在按下回车键或搜索按钮后显示错误消息吗？如果用户删除他的关键字，错误消息会再次隐藏吗？
删除关键字后错误消息仍然存在

【解决方案4】：

我创建了一个jsfiddle，可能与您想要的很接近。

看一眼，看看你能做些什么。

不要犹豫，提出问题。

我最好的解释是：

input 和submit 按钮上都有一个事件处理程序，用于测试输入值。根据我从您的问题中假设的条件，将显示成功警报或错误消息。成功警报可以替换为 ajax 调用或触发表单提交。

【讨论】：