動態輸入框格式化

我想格式化使用javascript/jquery的<input>框。動態輸入框格式化

目標 - 當用戶鍵入時，在每第三個字符後自動添加連字符。

123123123 becomes 123-123-123

我有一個工作代碼，但它超級慢，笨重。 我期待的建議，關於如何提高代碼

$('#serial').keyup(function(){ 
 

 
    $(this).val($(this).val().trim()); 
 

 
    var str = $(this).val(); 
 
    var newStr = str.replace(/-/g, ""); 
 

 
    var valuesArray = newStr.split(""); 
 
    var newVal = ""; 
 

 
    while (i = valuesArray.shift()){ 
 
    if(newVal.length === 3){ 
 
     newVal += "-"; 
 
    } else if (newVal.length === 7){ 
 
     newVal += "-"; 
 
    } 
 
    newVal += i; 
 
    } 
 
    $(this).val(newVal); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<label for="serial">Type something magical</label> 
 
<input type="text" id="serial" name="serial">

來源

2016-01-29 magreenberg

你的代碼只加連字符2倍 – gurvinder372

是啊，我要指出的是，串行號碼只有9位數字。 :) – magreenberg

第一行不需要將值分配給輸入控件 –

使用input的keyup事件istead它是非常有用的跟蹤輸入字段進行更改：

$('#serial').on('input', function(){

注意：該代碼似乎緩慢，因爲keyup不會觸發，直到你rel緩解關鍵，但你可以在釋放第一個字符之前輸入下一個字符。

希望這會有所幫助。

更新：

你不需要任何環路在這裏，你可以使用substr削減你的字符串和插入分離器-和使用maxlength來定義你想要charaters的最大數量包含您的序列：

$('#serial').on('input', function() 
 
{ 
 
    var input_value = $(this).val().trim().replace(/-/g, ""); 
 
    
 
    if(input_value.length > 3){ 
 
     input_value = input_value.substr(0, 3) + '-' + input_value.substr(3); 
 
    } 
 
    if (input_value.length > 7){ 
 
     input_value = input_value.substr(0, 7) + '-' + input_value.substr(7); 
 
    } 
 
    
 
    $(this).val(input_value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="serial" name="serial" maxlength="11">

來源

2016-01-29 12:09:37

試試這個code，取而代之inefficient regex與子

$('#serial').input(function(){ 

    $(this).val($(this).val().trim()); 

    var str = $(this).val().trim().split("-").join(""); 
    var output = ""; 
    while (str.length > 3) 
    { 
    output += str.substring(0,3) + "-"; 
    str = str.substring(3); 
    } 
    output += str; 

    $(this).val(output); 

});

來源

2016-01-29 12:22:10 gurvinder372

這個Def有效，但它似乎也有點慢。我認爲這種方法比我的更好，然而，扎卡里亞的答案似乎迄今爲止是最好的。 – magreenberg

一點點進一步優化

$('#serial').on('input', function() { 

    var str = $(this).val().trim(); 
    var i = 3; 
    while (i < str.length) { 
    if (str.charAt(i) == '-') { 
     i += 4; 
    } else { 
     str = str.slice(0, i) + '-' + str.charAt(str.length-1); 
    } 

    } 
    $(this).val(str); 

});

的jsfiddle https://jsfiddle.net/h5hdvcwu/1/

來源

2016-01-29 12:31:47 Slaaavo

動態輸入框格式化

回答

相關問題