記録

某検索サイトの電卓もどきの作り方!!

某検索サイトの電卓の作り方!! 某検索サイトのウェブ電卓は・・・全角を入力しても 半角になり表示されます。 こんな事当たり前には出来ない・・・。 出来ない理由はjavascriptでは文字を入力時に全角の文字が 入力されても同じkeycodeしか返してくれないです。 だったら文字が入力されたらその都度、文字を 変換すれば『良いじゃね』と思うかもしれませんが 実はこれも全てのブラウザに対応するのは難しい 何故なら文字を数文字入れた後、文字の間に再度文字を 入れたりすると・・・。ちなみにユニコードから 文字の置き換えは可能ですが・・・一度、文字を 分解し再度組み立てるという事を行わなければ駄目なんですね。 そうすると凄く重くなります。そして全てのブラウザに 対応するには至難です。 それを解決したサンプルサイトを載せときます。 ちなみに、全角文字を半角にしないといけないという 事が仕事で発生したので夜な夜な調べてました。 その時に某検索サイトの電卓のことを思い出したわけです。 今回はこの方法を使うことは無くなったので こちらで紹介します。ソースが読めるひとは ソースを読んでみてください。 ちなみにこんな事は検索しても出てきません。 某検索サイトのソースコードから導き出しました。 某検索サイトのソースは難読化していますが Chromeブラウザを使うと難読化を正規化した状態に してくれます(つい最近知りました)。 某検索サイトさんは、かなり太っ腹です。 いろいろなコードをオープンソースで提供しているのですから ホント、凄いなと思います。 https://www.zip358.com/tool/suu.php?(現在:Chromeブラウザのみ対応)
<html>
    <head>
        <meta charset="EUC-JP">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>
        $(function(){
            $("#num_in").keyup(function(e){
                num_in(e.keyCode);
            });
            $("#num_in2").keyup(function(e){
                var str = $(this).val();
                $("#keycode").html("keycode=" + e.keyCode);
                if(str.length>=1){
                   console.log(str.charCodeAt(str.length - 1));
                }
            });
            function num_in(in_str){
                var num = [[],[]];
                num[0] = [96,96,48,48,96];//0
                num[1] = [97,97,49,49,97];//1
                num[2] = [98,98,50,50,98];//2
                num[3] = [99,99,51,51,99];//3
                num[4] = [100,100,52,52,100];//4
                num[5] = [101,101,53,53,101];//5
                num[6] = [102,102,54,54,102];//6
                num[7] = [103,103,55,55,103];//7
                num[8] = [104,104,56,56,104];//8
                num[9] = [105,105,57,57,105];//9
                num[10] = [8,8,8,8,8];//backspace
                num[11] = [46,46,46,46,46];//delete
                for(var i=0;i<12;i++){
                    for(var ii=0;ii<5;ii++){
                        if(i<=9){
                            if(num[i][ii]==in_str){
                                $("#num_in").html($("#num_in").html() + i);
                                break;
                            }
                        }else{
                            if(num[i][ii]==in_str){
                                var str =$("#num_in").html();
                                str = str.substr(0,str.length - 1) ;
                                $("#num_in").html(str);
                                break;
                            }
                        }
                    }
                }
            }
        });
        </script>
    </head>
    <body>
        全角無効で入力する方法。スマホは非対応。黒い枠に数字を入力してみてください。
        <div style="width: 200px;height: 20px;font-size: 16px;background-color: #000;color: #fff;"  type="text" id="num_in" tabindex="1"></div><br>
        半角英数字のkeycodeを知りたい場合はこちらで入力ください。<br>
        <input  type="text" id="num_in2" >
        <div id="keycode"></div>
    </body>
</html>
 

活動支援よろしくお願いします

順風満帆前のページ

最低の水準を引き上げること。次のページ

関連記事

  1. 記録

    映画、マイ・インターンを観てきましので感想なんかを #映画レビュー

    マイ・インターンを観てきましので感想なんかを残しときます。まず、予…

  2. 記録

    文字の置き換えはコマンドラインから

    文字の置き換えは「sed」というコマンドを使うことで文字の置き換えは…

  3. 記録

    高知空港にJRが直結すれば赤字解消はできなくとも。

    高知空港にJRが直結すれば赤字解消はできなくとも、それなり高知県の印…

  4. 記録

    本に救われる。

    本に救われる。本は教養を身につけるばかりではなく、たまに本に救われ…

  5. 記録

    新妻免疫塾 K&L Immunology Club

    免疫のことを優しく解説しているサイト、YOUTUBEというカテ…

2017年2月
 12345
6789101112
13141516171819
20212223242526
2728  

カテゴリー

PAGE TOP