2007年11月22日 13:09

フォームのメールアドレスはJavaScriptで能動的に半角に変換してみるとどうだろう

スポンサードリンク

メールアドレス入力欄をフォームで作るとき、WindowsのIEだと、CSSでかな漢字変換の制御ができるので全角ローマ字を入力させないことが可能ですけれども、それ以外のブラウザだとWinIE独自の構文なんてスルーされてしまうので、ここは全角のローマ字で入力されたらすぐに半角に直す、みたいなアプローチをとる場面なのかなー

全角ローマ字で入力すると半角になるよ

E-Mail:

アイコンはおなじみfamfamfamです。
http://www.famfamfam.com/lab/icons/

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <script type="text/javascript">
    <!--
    /* $関数 */
    if (typeof $ != 'function') {
      $ = function(id) { return document.getElementById( id ) }
    }
    /* String.z2h_ascii() を拡張します
      via http://homepage3.nifty.com/aokura/jscript/z2h_ascii.html */
    if (typeof String.z2h_ascii == 'undefined') {
      String.prototype.z2h_ascii = function () {
        var src = this;
        var str = new String;
        var len = src.length;
        for (var i = 0; i < len; i++) {
          var c = src.charCodeAt(i);
          if (c >= 65281 && c <= 65374 && c != 65340) {
            str += String.fromCharCode(c - 65248);
          } else if (c == 8217) {
            str += String.fromCharCode(39);
          } else if (c == 8221) {
            str += String.fromCharCode(34);
          } else if (c == 12288) {
            str += String.fromCharCode(32);
          } else if (c == 65507) {
            str += String.fromCharCode(126);
          } else if (c == 65509) {
            str += String.fromCharCode(92);
          } else {
            str += src.charAt(i);
          }
        }
        return str;
      }
    }
    function pageStart() {
      addEvent();
      validate('email');
    }
    function addEvent() { // input要素にチェック用イベント付加(MacIE5考慮)
      $('email').onchange = function() {
        this.value = this.value.z2h_ascii();
        validate(this.id);
      }
    }
    function validate(id) {
      var imgDir = 'http://blog.dtpwiki.jp/photos/uncategorized';
      var array = { 
        'email' : '^([^@\\s]+)@(([-a-z0-9]+\\.)+[a-z]{2,})$'
      };
      var o  = array[ id ];
      if(typeof o == 'undefined') {
         return;
      }      
      var regex = new RegExp(o);
      var elmInput = $(id);
      var elmImg   = $('s_' + id );
      if ( elmInput.value == '') {
        elmImg.src = imgDir + '/' + 'textfield.png';
        return;
      }
      else if (elmInput.value.match( regex ) ) {
        elmImg.src = imgDir + '/' + 'tick.png';
        return true;
      }
      else {
        elmImg.src = imgDir + '/' + 'cross.png';
        return false;
      }
      return;
    }
    window.onload = function() { pageStart(); };
    // -->
    </script>
    <style>
    <!--
    textarea, select, input {
      font-family : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", Osaka,
      Helvetica, Arial, Verdana, "ＭＳ Ｐゴシック", sans-serif;
    }
    -->
    </style>
  </head>
  <body>
    <img src="http://blog.dtpwiki.jp/photos/uncategorized/textfield.png" id="s_email" />
    <input id="email" size="40" />
    <input type="button" value="送信(NOP)" />
  </body>
</html>

2007.11.22 13:09 投稿　大野義貴 [Script] | 固定リンク |