Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何使用JQuery在文本框中的每个逗号后自动插入空格?_Jquery_User Input - Fatal编程技术网

如何使用JQuery在文本框中的每个逗号后自动插入空格?

如何使用JQuery在文本框中的每个逗号后自动插入空格?,jquery,user-input,Jquery,User Input,我试图使用jQuery编写一个脚本,它假设在每个逗号“,”后面自动放置一个空格,以便分隔用户在输入字段中输入的数字序列。e、 g.如果他们输入(45,68,95,23),当用户离开输入字段时,它变为(45,68,95,23) 得到这个来检查输入是否有逗号 $("#test").blur(function() { if(this.value.indexOf(",") !== -1) { alert('got a comma'); } }); 或者,使用较少的jQ

我试图使用jQuery编写一个脚本,它假设在每个逗号“,”后面自动放置一个空格,以便分隔用户在输入字段中输入的数字序列。e、 g.如果他们输入(45,68,95,23),当用户离开输入字段时,它变为(45,68,95,23)

得到这个来检查输入是否有逗号

$("#test").blur(function() { 
    if(this.value.indexOf(",") !== -1) {
        alert('got a comma');
    }
});
或者,使用较少的jQuery:

$('#test').blur(function(){
  this.value = this.value.replace( /,\s*/g, ', ' );
});

只需用逗号分割输入值,修剪每个项目的空格,然后用逗号和空格将结果数组重新连接起来

$("#test").blur(function () {
  this.value = $.map(this.value.split(","), $.trim).join(", ");
});

使用正则表达式,这将在更改值后文本框失去焦点时,将每个逗号周围的空格标准化为一个U+0020空格字符。它还从开头和结尾修剪空格(或一个多余的逗号):

$("#test").change(function() {
    this.value = this.value.replace(/\s*,\s*/g, ', ').replace(/^,?\s*|,?\s*$/g, '');
});
Regex还有助于告诉用户其输入是否有效:


@匿名
String.prototype.replace
在JavaScript中没有变异。我甚至不知道这是什么意思。如果type是一个问题,你就不能使用String()函数吗?@Anonymous我的意思是,在
值上调用
replace
不会改变值;它将只返回一个新字符串。您需要
this.value=this.value.replace…
。您的正则表达式上也没有理由使用
i
m
修饰符。您是对的,我忽略了这一点。然而,我认为//gim是一种很好的实践。这个用户显然从来没有听说过regex.With甚至更少的
jQuery
document.getElementById('test').onblur=function(){This.value=This.value.replace(/,\s*/g,,');}嗯。。。第一种方法是完全不必要的,因为第二种方法在各方面都是优越的。@JacobRelkin-Heh:)当然,这会遇到一个不太可能的问题,即需要将多个模糊处理程序附加到元素,但始终有利于让大众了解非jQuery选项+1用于幽默和包含所有合适的分号。@YiJiang我同意后者更优越。我加入前者是为了让大家意识到使用函数形式
val()
(没有重复的jQuery对象,没有重新查询旧值)的好处。除非JavaScript只需要插入逗号,没有其他DOM操作,没有动画或事件处理程序处理由类或其他属性标识的项,那么,反对使用JQuery并坚持只使用原始JavaScript就有点愚蠢了。我看到很多开发人员浪费了这么多宝贵的时间,因为他们觉得使用一个经过尝试和测试的框架来实现他们的业务目标是一种欺骗,而这一切只需要页面加载时间的几毫秒。当然,出于学术目的,尝试学习一些基础知识总是很好的,这样你就知道幕后发生了什么。:)+1只是为了享受以lambda形式传入库函数的难得乐趣。@Phrogz,这意味着什么?@qwertymk
$的第二个参数。map(…)
需要是一个函数。通常您会看到如下内容:
$.map(…,函数{return…})
但是Todd在这里重新使用了一个现有的jQuery函数,并通过提供它的引用来传递它,而不使用下面的括号,这将导致立即调用它。
$("#test").blur(function () {
  this.value = $.map(this.value.split(","), $.trim).join(", ");
});
$("#test").change(function() {
    this.value = this.value.replace(/\s*,\s*/g, ', ').replace(/^,?\s*|,?\s*$/g, '');
});
$("#test").focus(function() {
    $(this).removeClass('valid invalid');
}).blur(function() {
    this.value = this.value.replace(/\s*,\s*/g, ', ').replace(/^,?\s*|,?\s*$/g, '');
    if(/^(?:[\d.](?:, )?)*$/.test(this.value)) {
        $(this).addClass('valid');
    } else {
        $(this).addClass('invalid');
    }
});