小 中 大
■ ■ ■ ■ ■ ■ ■

Home > 2017年 > 2月 > 24日

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

2017年02月24日

Logging


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

 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2017年02月24 12:10日

タグ

AM,