記録

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


某検索サイトの電卓の作り方!!
某検索サイトのウェブ電卓は・・・全角を入力しても
半角になり表示されます。
こんな事当たり前には出来ない・・・。
出来ない理由は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. 記録

    億男 川村元気(著)を購入した( ゚д゚ )。

    億男 川村元気(著)を購入した( ゚д゚ )。まだ、読んでいないけ…

  3. 記録

    結局、SNSなんてものは暇な時しか使わない?

    結局、SNSなんてものは暇な時しか使わない?もしくは宣伝か、やり取…

  4. 記録

    イケダハヤトさんの武器として書く技術を読んでみた。

    イケダハヤトさんの武器としての書く技術を読んでみた。根本的に書く技…

  5. 記録

    ワンコインでVPSが使用できるレンタルサーバーDTI!!

    http://dream.jp/vps/ワンコインでVPSが使用で…

  6. 記録

    近況報告::::

    睡眠に関して休日は、この頃、寝たい時に寝て起きたい時に起きて平…

PAGE TOP