タグ別アーカイブ: text

要素へのデータ紐づけ

今回は要素へのデータ紐づけに関してです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                $('#d_set').click(function() {
                    $('#disp_data').data('set_value', $('#input_data').val());
                    $('#input_data').val('')
                })
                
                $('#d_add').click(function() {
                    $('#disp_data').data('set_value', $('#disp_data').data('set_value') + ' ' + $('#input_data').val());
                    $('#input_data').val('')
                })

                $('#d_remove').click(function() {
                    $('#disp_data').removeData('set_value');
                    alert('Data Remove OK!');
                })

                $('#d_disp').click(function() {
                    $('#disp_data').empty().text($('#disp_data').data('set_value'));
                })

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin       : 10px;
            }

            button {
                margin-right : 5px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div>
                <h1>Data Input</h1>
                <input id="input_data" />
                <button id="d_set">Data Set</button>
                <button id="d_add">Data Add</button>
            </div>
            <div>
                <h1>Data Disp</h1>
                <button id="d_disp">Data Disp</button>
            </div>
            <div id="disp_data"></div>
            <div>
                <h1>Data Remove</h1>
                <button id="d_remove">Data Remove </button>
            </div>
        </div>

    </body>
</html>

sample

sample の入力欄に文字を入力して「Data Set」の button をクリックすることで
data を object のに紐づけることができます。

その時点では紐づけした data は表示されていませんが「Data Disp」の button を
click することで紐づけされた data を表示されることができます。

今回の内容は個人的には少し嬉しかったりします。
今まではとりあえず attr などで適当な名前を付けて設定していましたが
余り綺麗ではないと感じていました。

今回からは変な値を attr する必要も無いので安心できます。
ちなみに、配列でのデータの登録も出来るので非常に安心です。
ちょっと気になるのは、実際はどこに保存されているのかということでしょうか・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

何もせずに時間経過した時の実行処理

今回は何も操作しない状態で一定時間後に行う処理です。
色々とやり方はあるとは思いますがまずはやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                var nowSecond = 0;
                
                $(window).click(function(){
                    nowSecond = 0;
                    $('#second_area').text(nowSecond);
                    $('#disp_area').text('');
                });

                function countTimer() {

                    $('#second_area').text(nowSecond);

                    if ((nowSecond % 10) == 0 && nowSecond > 0) {
                        $('#disp_area').text('elapsed ' + nowSecond + ' second');
                    }

                    nowSecond += 1;
                }
                setInterval(countTimer, 1000);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin : 30px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="timer_area"><span id="second_area">0</span> second</div>
            <div id="disp_area"></div>
        </div>

    </body>
</html>

sample

sample では一定時間 click が無かった際にメッセージを表示します。
時間の確認のため画面上には前回のクリックからの経過秒数を表示しています。

通常は時間経過後に処理をする場合には以前の delay などを
使用すれば事は足りるのですが、一致時間の間何もしない(今回は click をしない)
ことを検知するとなると一手間必要になります。

今回はとりあえず文言の変形だけですが、経過した秒数で処理が変更できるのは
以外と便利なのかもしれません。

時間が経ったときに行う処理を変更することでで色々なことを実行出来ます。
たとえば前のアクションからの経過時間によって画像を入れ替えたりとかですね。
経過時間によって内容が変化すれば中々楽しみが増えそうですねぇ。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

セレクタについて4(コンテントフィルタ)

セレクタシリーズの4回目、今回はフィルタ機能についてです。

今回はコンテントフィルタを調査しました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#ul_1 li:contains(TextData)').css('color', '#ff0000');
                $('#ul_1 li:has(p)').css('color', '#0000ff');
                $('#ul_1 li:empty').text('EmptyData');
                $('#ul_1 li span:parent').css('color', '#00ff00');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            ul {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <ul id="ul_1">
                <li>1. data</li>
                <li>2. data</li>
                <li>3. data TextData</li>
                <li>4. data</li>
                <li><p>5. data</p></li>
                <li>6. data TextData</li>
                <li>7. data TextData</li>
                <li><span>8. data</span></li>
                <li>9. data</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

        </div>

    </body>
</html>

sample

引き続き地味な sample ページです。
まぁ、基本について説明させていただきます。

・コンテントフィルタ
■:contains(text)
例) $(‘#sample:contains(text)’)
指定した文字列が含まれる要素が対象となります。

■:has(selector)
例) $(‘#sample:has(selector)’)
指定した要素を含む要素のみ全て対象となります。

■:empty
例) $(‘#sample:empty’)
空の状態の要素が対象となります。

■:parent
例) $(‘#sample:parent’)
空ではないの状態の要素が対象となります。
今回は「$(‘#ul_1 li span:parent’)」を対象としています。
この場合は、spanタグの中に「8. data」が存在するため「空では無い」となります。

今回の「コンテンツフィルタ」はこんな感じですね。
う~ん・・・、ちょっと項目が少ないですね。
追加で「表示/非表示フィルタ」と「子要素フィルタ」も調査しておきます。

・表示/非表示フィルタ
■:hidden
例) $(‘#sample:hidden’)
非表示状態の要素が対象となります。
また、form項目の場合、hidden属性の要素が対象となります。

■:visible
例) $(‘#sample:visible’)
表示状態の要素が対象となります。

・子要素フィルタ
■:nth-child
例) $(‘#sample:nth-child(index)’)
親要素に対してn番目、偶数、奇数、n個おきの指定をした子要素が対象となります。
 index
  指定番数の要素
 even
  偶数番号の要素
 odd
  奇数番号の要素
 equation
  指定数ごとの要素

■:first-child
例) $(‘#sample:first-child’)
親要素に対して最初の子要素が対象となります。

■:last-child
例) $(‘#sample:last-child’)
親要素に対して最後の子要素が対象となります。

■:only-child
例) $(‘#sample:only-child’)
各親要素が1つだけ子要素を持つ場合に、その子要素を選択する。
親要素に対して1つだけの子要素の場合に子要素が対象となります。

今回の「フィルタ」はこんな感じですね。
今回書いていませんが「属性フィルタ」もありますが、いままで当サイトでもよく使っていた
「$(“input[name=’type_1′]”)」などなので説明は省きます。

次は「フォームフィルタ」ですかね。
「フォームフィルタ」が終わればセレクター調査は完了です。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

テキストエリアの入力内容チェック

今回はテキストエリアの入力内容のチェックを作ってみます。

私が今まで作ったプログラムでは、以下の流れでエラーチェックをしていました。
1.入力内容を POST してPHPプログラムに渡す。
2.PHPで入力内容に対してのエラーチェックを行う。
3.エラーの場合は入力画面にエラー内容を表示する。

だけど、このやり方では「2.」の時に画面遷移が発生するんですよね・・・
というわけで、今後のために入力内容チェックを調査しながらの書き込みです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {

                $("#check").click(function() {
                
                    // 全角チェック
                    var type_1 = $("input[name='type_1']").val();
                    var err_flg = false;
                    for(var cnt = 0; cnt < type_1.length; cnt++){
                        var work_len = escape(type_1.charAt(cnt)).length;
                        if(work_len < 6){
                            err_flg = true;
                        }
                    }
                    if (err_flg == true) {
                        $("#err_type_1").text("すべて全角で入力して下さい。");
                    } else {
                        $("#err_type_1").text('');
                    }

                    // 半角英数チェック
                    var type_2 = $("input[name='type_2']").val();
                    if (type_2.match(/[^0-9A-Za-z]+/)) {
                        $("#err_type_2").text("半角英数で入力して下さい。");
                    }    else {
                        $("#err_type_2").text('');
                    }

                    // 文字数チェック
                    var length_1 = $("input[name='length_1']").val();
                    if(length_1.length > 5) {
                        $("#err_length_1").text("最大文字数は5文字です。");
                    }    else {
                        $("#err_length_1").text('');
                    }

                });

            });
        --></script>

    </head>
    <body>

        <h1>入力チェック</h1>

        <h2>全角(半角文字の入力不可)</h2>
        <input type="text" name="type_1">
        <span id="err_type_1"></span>

        <h2>半角英数(全角・記号の入力不可)</h2>
        <input type="text" name="type_2">
        <span id="err_type_2"></span>

        <h2>文字数(最大5文字)</h2>
        <input type="text" name="length_1">
        <span id="err_length_1"></span>

        <div>
            <input type="button" id="check" value="チェック">
        </div>

    </body>
</html>

sample

全角のみの入力チェックを行うときがちょっと変わってますね。
文字列のエンコードを行った上で、文字毎にバイト数(UTF-8[3] × 2Byte[2] = 6)をチェックしています。
ちょっと面倒ですよね・・・
「何かいい手があるといいな」と思いつつ「全角のみの入力ってそんなに無いからなぁ」とも思います。

まぁ、そのほかに関しては大半のチェックは正規表現で、後は応用しだいなのかなと。
正規表現なら色々と応用も利くからいいですよね。
必須チェックも文字数チェックの応用でいけるだろうし・・・

あと、簡易的なメールアドレスチェックの正規表現はこんなので出来るはず。

/[!#-9A-~]+@+[a-z0-9]+.+[^.]$/i

※注意
いろんなサイトで、「メールアドレスは正規表現ではチェック出来ない」と言う記事を見かけます。
厳密なチェックを行う場合は、そういったサイトを参考にしてください。
まぁ、正確なチェックを望む人は、最初からこのサイトを参考にしないよね・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。