jQuery：需要防止重复'space bar'输入

Question

抱歉，如果这是一个简单的问题，相对较新的 JavaScript/jQuery 程序员。我要做的是在用户按下 space 栏后无法再次按下时，对输入字段（邮政编码条目）进行验证。

我了解如何防止 space 条进入任何输入条目，但无法掌握最多按一次后如何做到这一点。

编辑： @cosmo0 这是我开始尝试的，类似于@hamed 但利用了我在另一个网站上看到的东西：

var spacePress = 0;
$('#StreamUrl').keypress(function(event){     
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '32'){
        nbr++;  
    }else if( nbr == 1){
        event.keyCode
    }
});

编辑：我相信我已经取得了积极的结果

HTML

<input type="text" id="inputBox" class="input" autocomplete="off"/>
<p id="key"></p>
<p id="textField"></p>

jQuery

var value;
var spaceCount = 0;

$( '.input' ).keydown(function(e){
    var value = $( '.input' ).val();
    if( e.keyCode == 32 ){
        spaceCount ++;
        console.log( 'Space count at ' + spaceCount );
    }
    if( e.keyCode == 32 && spaceCount > 1 ){
        e.preventDefault();
    }else if(value == ""){
        spaceCount = 0;
    }
    $( '#key' ).text(spaceCount);
    $( '#textField' ).text(value);
});

jsFiddle

我认为这可以改进，因为当我最初清除输入字段时 spaceCount 不会设置为 0，直到我键入 != 32.

的 keyCode

感谢大家的帮助:)

编辑 2 感谢@Adjit，我想我找到了更好的解决方案。奇怪的是，他的 jQuery 代码没有工作，但 JavaScript 是（我要仔细检查代码，看看是否有任何不一致）。但是我确实添加了一些额外的东西，这是为了防止用户输入 space 如果这是输入的第一个字符。

JavaScript

document.getElementById('myInput').onkeydown = function(e) {
    if(e.keyCode == 32 && this.value.indexOf(' ') >= 0) {
        document.getElementById('key').innerHTML = "Already a space!";
        e.preventDefault();
    }else if( e.keyCode == 32 && this.value.length == 0 ){
        e.preventDefault();
    }
    else{
        document.getElementById('key').innerHTML = "";
    }
}

jsFiddle

Answer 1

想出了一个更好的方法来做到这一点，没有任何计数器或任何东西 - 而且它可以用纯 Javascript

来完成

JQuery

$('#myInput').on('keydown', function(e){
    if(e.keyCode == 32 && $(this).val().indexOf(' ') >= 0){
        $('#key').text('Already a space!');
        return false;
    }
});

Javascript等价

document.getElementById('myInput').onkeydown = function(e) {
  if(e.keyCode == 32 && this.value.indexOf(' ') >= 0) {
    document.getElementById('key').innerHTML = "Already a space!";
    return false;
  }
  else document.getElementById('key').innerHTML = "";
}

<input id="myInput" />
<span id="key"></span>

Answer 2

最后你只想在单词之间有一个space而不是多个space？为什么不等到用户尝试提交表单，然后删除所有额外的 spaces：

var string = string.replace(/\s{2,}/g, ' ');

DEMO

其中 string 是 输入值。

编辑：

我去掉了检测space的on key事件，因为有很多ifs和conditions需要测试。

您需要一个在 false

boolean

一旦使用 .on('keypress' 检测到 space... 您将布尔值设置为 true。
如果变量为 true 并且检测到 space，那么您可以执行 e.preventDefault() 以阻止将其添加到输入中。
如果按下后退space，您需要记住之前所有 space 的位置，以了解后退space 是移除还是先于 space。

Answer 3

我认为最简单的方法是像这样使用 jquery keydown 事件：

$(document).ready(function() {
   var spaceCount = 0;
   $("#inputId").keydown(function (e) {

       //space code is 32
       if (e.keyCode == 32)
         spaceCount ++;

       if(spaceCount == 2)
         e.preventDefault();

       else return true;


    });
});

jQuery：需要防止重复'space bar'输入

jQuery: Need to prevent repetitive 'space bar' input

forms

jquery

input

keycode