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

ホーム
Logging
某検索サイトの電卓もどきの作り方！！

2017.02.24

某検索サイトの電卓の作り方！！某検索サイトのウェブ電卓は・・・全角を入力しても半角になり表示されます。こんな事当たり前には出来ない・・・。出来ない理由はjavascriptでは文字を入力時に全角の文字が入力されても同じkeycodeしか返してくれないです。だったら文字が入力されたらその都度、文字を変換すれば『良いじゃね』と思うかもしれませんが実はこれも全てのブラウザに対応するのは難しい何故なら文字を数文字入れた後、文字の間に再度文字を入れたりすると・・・。ちなみにユニコードから文字の置き換えは可能ですが・・・一度、文字を分解し再度組み立てるという事を行わなければ駄目なんですね。そうすると凄く重くなります。そして全てのブラウザに対応するには至難です。それを解決したサンプルサイトを載せときます。ちなみに、全角文字を半角にしないといけないという事が仕事で発生したので夜な夜な調べてました。その時に某検索サイトの電卓のことを思い出したわけです。今回はこの方法を使うことは無くなったのでこちらで紹介します。ソースが読めるひとはソースを読んでみてください。ちなみにこんな事は検索しても出てきません。某検索サイトのソースコードから導き出しました。某検索サイトのソースは難読化していますが Chromeブラウザを使うと難読化を正規化した状態にしてくれます（つい最近知りました）。某検索サイトさんは、かなり太っ腹です。いろいろなコードをオープンソースで提供しているのですからホント、凄いなと思います。 https://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>