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

发布于 2024-10-12 02:44:04 字数 281 浏览 8 评论 0原文

我尝试使用 jQuery 编写一个脚本，它应该在每个逗号“，”后面自动放置一个空格，以便分隔用户在输入字段中输入的数字序列。例如，如果他们输入（45,68,95,23），当用户离开输入字段时，它会变成（45,68,95,23）。

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

$("#test").blur(function() { 
    if(this.value.indexOf(",") !== -1) {
        alert('got a comma');
    }
});

原文

I trying to write a script using jQuery, it is suppose to automatically put a space after every comma "," in order to separate a sequence of numbers that user input in an input field. e.g. if they enter (45,68,95,23) it becomes (45, 68, 95, 23) when the user moves away from the input field.

Got this to check if the input has a comma or not

$("#test").blur(function() { 
    if(this.value.indexOf(",") !== -1) {
        alert('got a comma');
    }
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

欢烬 2024-10-19 02:44:04

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

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

Simply split the input value by commas, trim the spaces off each item, then join the resulting array back together with a comma and space.

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

回复收藏 0 原文

心头的小情儿 2024-10-19 02:44:04

$('#test').blur(function(){
  $(this).val(function(i,oldValue){
    return oldValue.replace( /,\s*/g, ', ' );
  });
});

或者，使用更少的 jQuery：

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

$('#test').blur(function(){
  $(this).val(function(i,oldValue){
    return oldValue.replace( /,\s*/g, ', ' );
  });
});

Or, with less jQuery:

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

回复收藏 0 原文

荆棘i 2024-10-19 02:44:04

this.value=this.value.replace(/,/gim,', ');

this.value=this.value.replace(/,/gim,', ');

回复收藏 0 原文

年少掌心 2024-10-19 02:44:04

使用正则表达式，这会将每个逗号周围的空白规范化为之后的一个 U+0020 空格字符，当文本框在更改值后失去焦点时会发生这种情况。它还会修剪开头和结尾的空格（或杂散逗号）：

$("#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');
    }
});

Using regex, this will normalize the whitespace around each comma to one U+0020 space character after, happening when the text box loses focus after changing value. It also trims whitespace (or a stray comma) from the beginning and end:

$("#test").change(function() {
    this.value = this.value.replace(/\s*,\s*/g, ', ').replace(/^,?\s*|,?\s*$/g, '');
});

Regex is also helpful for telling the user whether his input is valid or not. Try this demo:

$("#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');
    }
});

回复收藏 0 原文

~没有更多了~