1. placeholderをアニメーションさせる

    こんなのもあったのですが、placeholderのテキストをvalue値に設定してしまうため少し扱いづらいです。というわけで作ってみました。各種ブラウザ最新版であれば問題なさそうです。

    座標やopacityのアニメーションも試してみたのですが、ブラウザごとに挙動が全然違うのでそのへんは注意が必要ですね。まあ、placeholderをアニメーションさせるケースはあまりなさそうですが。

     

    $("input,textarea").focus(
    function() {
    var target = $(this);
    var placeholderText = target.attr("placeholder");
    var temp = placeholderText;

    var cnt = 0;
    var addText = function() {
    if (!temp) {
    return;
    }
    if (temp.length == 0) {
    return;
    }
    var text = temp.substring(0, ++cnt);
    target.attr("placeholder", text);
    if (text == temp) {
    return;
    } else {
    setTimeout(addText, 15);
    }
    }

    target.blur(function() {
    setTimeout(addText, 50);
    });

    var deleteText = function() {
    if (!placeholderText) {
    return;
    }
    if (placeholderText.length == 0) {
    return;
    }
    placeholderText = placeholderText.substring(0,
    placeholderText.length - 1);
    target.attr("placeholder", placeholderText);
    setTimeout(deleteText, 15);
    }

    setTimeout(deleteText, 50);

    });

    Posted by Takeya Hikage on 2014年03月26日
    Categories javascript jQuery