打字時在數字中添加逗號

我想在用戶鍵入數字時添加逗號。在Jquery中選擇input form-control類的屬性number類型的正確語法是什麼？打字時在數字中添加逗號

編輯：我不能改變HTML代碼，因爲它是從Django與Bootstrap輸出。

HTML

<span class="input-group-addon">$</span> 
<input class="form-control" id="id_step2-number_2" 
     name="step2-number_2" type="number"> 
<span class="input-group-addon">.00</span>

JQuery的

$(document).ready(function(){ 
    $("input[type='number']").keyup(function(event){ 
     // skip for arrow keys 
     if(event.which >= 37 && event.which <= 40){ 
      event.preventDefault(); 
     } 
     var $this = $(this); 
     var num = $this.val().replace(/,/gi, "") 
      .split("").reverse().join(""); 

     var num2 = RemoveRougeChar(
      num.replace(/(.{3})/g,"$1,").split("") 
       .reverse().join("") 
     ); 

     console.log(num2); 

     // the following line has been simplified. 
     // Revision history contains original. 
     $this.val(num2); 
    }); 
}); 

function RemoveRougeChar(convertString){ 
    if(convertString.substring(0,1) == ","){ 
     return convertString.substring(1, convertString.length)    
    } 
    return convertString; 
}

的jsfiddle鏈接 http://jsfiddle.net/yWTLk/767/

來源

2014-12-05 jtd92

爲什麼不使用自動數字插件？ – rcs 2014-12-05 08:42:34

看起來很有趣，但我不知道正確的語法來讓JQuery指向我發佈的文本輸入。 – jtd92 2014-12-05 08:47:01

'$ this.val（）'比'this.value'更有效率。 – RobG 2014-12-05 08:49:46

變化type="number"到type="text"，因爲你不能把逗號放入數字。

<input class="form-control" id="id_step2-number_2" 
     name="step2-number_2" type="text">

檢查更新Fiddle

來源

2014-12-05 08:47:22

使用輸入型「數字」似乎防止插入逗號與JavaScript中的輸入字段。如果您想要插入逗號，則可能需要使用「文本」輸入，但這會阻止JavaScript禁用的瀏覽器上的數字驗證。

樂趣永遠不會結束，它是HTML5。

來源

2014-12-05 08:51:21

首先，您不能使用input type=number，因爲它不允許您使用的字符,表示數字組。

二，具有良好的正則表達式，這實際上是超級簡單的，真的不需要反向和反向，這很無聊。

var num = $this.val().replace(/,/gi, ""); 
var num2 = num.split(/(?=(?:\d{3})+$)/).join(",");

第一行從輸入值中刪除逗號。
第二行是魔術，它將值分成3組，從最後到第一組，然後用逗號連接。例如，'1234567'將變爲['1', '234', '567']。

我在這裏使用split是隻是爲了顯示正則表達式的力量，在實踐中我們並不需要分割和加入，只需直接替換：

var num2 = num.replace(/\d(?=(?:\d{3})+$)/g, '$&,');

fiddle

但是，真正的魔力是的，我敢打賭你會大喊，toLocaleString！什麼？！

(1234567).toLocaleString() // "1,234,567"

來源

2014-12-05 09:07:55 Leo

但是，您會對小數點做些什麼？如果你使用小數點爲美分，它會打破它。 – James 2015-07-31 18:28:43

@James繼續'toLocaleString（）' – Leo 2015-08-01 01:23:36

我確實嘗試過，但沒有奏效。沒有錯誤。我在FF的最新版本。不過，我會在週一更多地考慮它。謝謝。 – James 2015-08-01 01:36:43

打字時在數字中添加逗號

回答

相關問題