さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】テキストボックスに入力したURLをリアルタイムでaのhrefに入れる

Pocket
LINEで送る

テキストボックスに入力したURLをリアルタイムでaのhrefに入れる。
そしてテキストボックスに「http://」か「https://」が入ったらリンクが有効になるようにする。

javascript

$(document).ready(function () {
    $('input[type="text"]').each(function () {
        $('a').attr('href', '');
        var _self = $(this);
        hpLink(_self)();
        $(_self).on('keyup', hpLink(_self))
    });

    function hpLink(elm) {
        var v, old = elm.val();
        return function () {
            old = v;
            str = $(elm).val();
            // テキストボックスに「http://」か「https://」が入ったらaタグのhrefにテキストボックスのvalueを入れる
            if ($('input[type="text"]').val().indexOf('http://') !== -1 || $('input[type="text"]').val().indexOf('https://') !== -1) {
                $('a').attr('href', str);
            } else {
                $('a').removeAttr('href');
            }
        }
    }
});

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容