如何格式化預先填充的輸入字段

我在頁面加載時使用來自API調用的數據填充電話輸入字段。如何格式化預先填充的輸入字段

我有一個格式化電話號碼的功能，如下所示：+1（888）333 4444。但是這個函數只有在有keyup事件的時候纔會起作用。我正嘗試使用這個相同的函數來獲取這個預先填充的輸入值。我試圖從keyup改變事件加載，onload，但它沒有影響。我試圖在setTimeout延遲中包裝函數，但那也不起作用。

我知道我失去了一些東西簡單...

<!DOCTYPE html> 
<html> 
    <body> 
    <form> 
     <label>Telephone</label> 
     <input type="tel" onload="phoneMask()" value="<?= data.phone ?>"/> 
    </form> 

    <script> 
    //Format telephone numbers 
    function phoneMask() { 
     var num = $(this).val().replace(/\D/g,''); 
     $(this).val('+' + num.substring(0,1) + ' (' + num.substring(1,4) + ') ' + num.substring(4,7) + ' ' + num.substring(7,18)); 
    }; 
    $('[type="tel"]').keyup(phoneMask) 
    </script> 
    </body> 
</html>

來源

2017-04-13 Deven Blackburn

在頁面的底部，在腳本中添加該：

function phoneMask() { 
    var num = $("input[type=tel]").val().replace(/\D/g,''); 
    $("input[type=tel]").val('+' + num.substring(0,1) + ' (' + num.substring(1,4) + ') ' + num.substring(4,7) + ' ' + num.substring(7,18)); 
    }; 

$(document).ready(function() { 
    phoneMask(); 
});

我已經編輯好phoneMask功能。這將在頁面加載完成後調用您的phoneMask函數。

這個假設只存在一個類型爲tel的盒子。否則，你將需要將代碼包裝在phoneMask中，每個代碼都使用每個選擇器。

來源

2017-04-13 19:58:59 Simon

我在標籤上面複製並粘貼了這個標籤，但沒有運氣。 –

我使用更新後的代碼編輯了我的原始回覆。 – Simon

啊，我看到了，這完美的作品。謝謝@西蒙！ –

如何格式化預先填充的輸入字段

回答

相關問題