Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@yamatech

jQueryで1文字ずつタイプ表示するテスト (4) お名前を入力編

More than 5 years have passed since last update.

jQueryで1文字ずつタイプ表示するテスト (4) お名前を入力編

これまでやってきた1文字づつタイプ表示していくスクリプトを基に、
初めの挨拶が表示された後に「お名前を入力してください」と入力フォームが出てきて、
なおかつ、入力した名前で「ようこそ○○さん」と返してくるものにしたい。

さらに、JavaScriptでカーソルもそれに追随するようにしたい。
また、入力フォームが現れると同時にtext欄がフォーカスされてすぐに入力できるようにしたい。

ただし前回までのソースの大部分を改変することになる...


HTMLファイルの変更点

<body>タグ内に

「はじめの挨拶文(div class="first")」
「入力フォーム(form id="inputForm")」
「その次の文章(div class="second")」

の三つのエリアを設ける。
なお、div タグ内部は前回同様、span タグで本文 (class='test') とカーソル (class='cursor') に分ける。

    <div class="first">
        <span class="test"></span><span class="cursor"></span>
    </div>
    <form id="inputForm">
        &gt;
        <input type="test" id="inputName" val="名無し">
        <input type="button" id="get" value="OK">
        <br>
    </form>
    <div class="second">
        <span class="test"></span><span class="cursor"></span>
    </div>

最初の文章 <div class="first"> が表示されたあとに入力フォーム <form id="inputForm"> が現れ、
名前を入力してOKボタンを押したら二番目の文章 <div class="second"> が表示される。

JavaScriptファイルの変更点

まずはじめに、全文表示するのでざっとみてください。

$(function() {

    // 1.入力フォームを隠しておく
    $('#inputForm').hide();

    // 2.初期化 //
    var txt = "Hello, World!!\nあなたのお名前を入力してください";
    var txtArr = txt.split("");
    var count = 0;

    var $area = $('.first > .test');
    $('.first > .cursor').html("_");
    $('.second > .cursor').html("");
    // 初期化ここまで //

    txtCount(); // 関数txtCountを実行

    // 3.関数txtCount
    function txtCount() {
        var timer = setTimeout(txtCount, 250);
        $area.append(txtArr[count].replace(/\n/, "<br>"));
        count++;
        if (count == txtArr.length) {
            clearTimeout(timer);

            if (txt == "Hello, World!!\nあなたのお名前を入力してください") {
                $('#inputForm').show();
                $('#inputName').focus();
                $('.first > .cursor').html("");
            }
        }
    }

    // 4.フォームのボタンを押した時の動作
    $('#get').click(function() {
        $area = $('.second > .test');
        $('.second > .cursor').html("_");
        valName = $('#inputName').val();
        txt = "ようこそ" + valName + "さん";
        txtArr = txt.split("");
        count = 0;
        txtCount();
    });

    // カーソル点滅
    setInterval(function() {
        $('.cursor').fadeIn(500).fadeOut(500);
    }, 1000);

});
解説
1.最初に入力フォームを隠しておく
   // 1.入力フォームを隠しておく
   $('#inputForm').hide();
2.初期化

次に最初の最初の挨拶文を表示するための初期設定。
これらは入力フォームのボタンを押すと入れ替わるようにするため、グローバル変数として作成する。
それから、変数 txt の内容は、txtArr に1文字ずつ配列変換して div タグ内span class="test" に append で書き出すが、
「はじめの挨拶文(div class="first")」だけではなく、「その次の文章(div class="second")」の span class="test" にも適用するため、
\$area という変数を用意しておき、初期値として $('.first > .test'); を代入しておく。

    // 2.初期化 //
    var txt = "Hello, World!!\nあなたのお名前を入力してください";
    var txtArr = txt.split("");
    var count = 0;

    var $area = $('.first > .test');  書き出す<div>タグのclassのセレクタを指定する変数
    $('.first > .cursor').html("_");  最初の文章の末尾の.cursorを("_")で表示
    $('.second > .cursor').html("");  後で表示される二番目の文章の.cursorを("")で消しておく
    // 初期化ここまで //

最初は初期化された状態で関数 txtCount( ); が実行されて一番目の文章が表示される。

    txtCount(); // 関数txtCountを実行
3.関数 txtCount

前回までは txtCount という変数の中で関数を実行したが、今回はまとまった関数にする。
フォームボタンを押した時などのイベントで参照する際、エラーになってしまう。
txtArr は初期値は最初の文章 "Hello, World!!\nあなたのお名前を入力してください" が入っている。
\$area.append(txtArr〜 の \$area は初期状態では $('.first > .test') セレクタなので該当するHTMLに文章が入る。
count 数が txtArr の数まで達したらタイマーが止まるのは前回と同じだが、
さらにその時点で表示されているテキストが "Hello, World!!\nあなたのお名前を入力してください" であれば、
次の動作 = 入力フォームの表示へ移る。

 // 3.関数txtCount
    function txtCount() {
        var timer = setTimeout(txtCount, 250);
        $area.append(txtArr[count].replace(/\n/, "<br>")); 初期状態では $area = $('.first > .test');
        count++;

        if (count == txtArr.length) {
            clearTimeout(timer);

            if (txt == "Hello, World!!\nあなたのお名前を入力してください") { もし最初の文章が表示されたら
                $('#inputForm').show(); formを表示して
                $('#inputName').focus(); textフォームを自動でフォーカスして
                $('.first > .cursor').html(""); 末尾のカーソルを消す
            }
        }
    }

4.フォームのボタンを押した時の動作

表示されたテキストフォームに名前を入力して OK ボタン(id#get) を押すと以下が実行される。
\$area に代入されているセレクタを $('.second > .test') に変更し、文末のカーソルを新たに表示される文章の末尾に移動する。
valName 変数を作り、テキストフォームの値(名前の文字列)を取得し、
テキスト txt を"ようこそ" + valName + "さん"に置き換えて、これも txtArr に1文字ずつ配列にする。
改めてカウントを0に戻し、これらの設定で txtCount( );関数を実行する。

    // 4.フォームのボタンを押した時の動作
    $('#get').click(function() {
        $area = $('.second > .test'); $area変数変更書き出すdivタグのclassを二番目のものに指定
        $('.second > .cursor').html("_"); .corsorを二番目の文末に持ってくる
        valName = $('#inputName').val(); textフォームに入力した文字を取得
        txt = "ようこそ" + valName + "さん"; txt変数を取得した文字列と繋げたメッセージに変更
        txtArr = txt.split(""); ここで代入されたtxtを改めて分割
        count = 0; カウント0に戻す
        txtCount(); これらの変数の中身を入れ替えた上で関数txtCountを実行
    });

このときに作成された2番目の文章は、セレクタ \$area = \$('.second > .test') に表示するので、
$('.first > .test') に入っている最初の文章はそのまま残り、新しい文章は続けて表示される。

カーソル点滅の動作

これは今までと全く変更なし。

    // カーソル点滅
    setInterval(function() {
        $('.cursor').fadeIn(500).fadeOut(500);
    }, 1000);
最後にCSSの見直し

jsファイルの冒頭で

    // 1.入力フォームを隠しておく
    $('#inputForm').hide();

と記述してはいるものの、ページが表示された際に一瞬だけチラッと出て消える。
初めから完全に隠すためにCSSファイルのほうにも非表示設定を追加する。

#inputForm {
    display: none;
}

サンプル

--> 実行サンプル


関連記事

「jQueryで1文字ずつタイプ表示するテスト (1)」
http://qiita.com/R2Y_mn/items/3d3aa162f920bd7b70dd

「jQueryで1文字ずつタイプ表示するテスト (2) 改行編」
http://qiita.com/R2Y_mn/items/0598ebd3d0a89cad34a1

「jQueryで1文字ずつタイプ表示するテスト (3) 点滅カーソル付けた編」
http://qiita.com/R2Y_mn/items/5255cc5ccbe59ce61435

>>「jQueryで1文字ずつタイプ表示するテスト (4) お名前を入力編」

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yamatech

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?