入力済みの入力フィールドをフォーマットする方法

ページが読み込まれたときに、電話入力フィールドにAPIコールのデータを入力しています。入力済みの入力フィールドをフォーマットする方法

電話番号を次のようにフォーマットする機能があります。+1（888）333 4444です。しかし、この機能は、キーアップイベントがある場合にのみ機能します。私は、この同じ機能でフォーマットされた入力済みの入力値を取得しようとしています。私はイベントをkeyupからload、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型の1つのボックスだけが存在することを前提に動作します。それ以外の場合は、phoneMaskでコードをラップする必要があります。

出典

2017-04-13 19:58:59 Simon

これはタグのすぐ上にコピーされ貼り付けられましたが、運はありません。 –

私は元の応答を更新されたコードで編集しました。 – Simon

ああ、それは完璧に動作します。ありがとう@サイモン！ –

入力済みの入力フィールドをフォーマットする方法

答えて

関連する問題