jQueryでtextareaの値はvalで取得する

HTMLのtextareaは

<textarea>abc</textarea>

と書きます。
jQueryでは、このようにタグで挟む場合は.html()で値を取得できます。
しかしtextareaの場合は.val()で取得します。

実際に試してみたところ、.val()、.text()、.html()のいずれでもtextareaの値を取得することができました。
しかし、textareaの内容を書き換えてから取得すると、書き換えた後の値を取得できるのは.val()だけでした。

一方、値のセットについては、やはりいずれの場合でもセットすることができました。
しかし、.text()と.html()では、一度、セットした後、再度セットしようとすると正しく動作しませんでした。.val()ならば意図通り動作します。

jQueryでtextareaの値を取得したりセットしたりする場合は.val()を使うのが確実です。

なおChromeとFirefoxでは上述のような動作をしますが、IEでは.text()と.html()でも.val()と同じ動作をします。

目次を自動的に生成するjQueryプラグイン

HTMLで書いたページに目次を自動的に追加するjQueryプラグインです。
h1-h6で記載した見出しを抽出し、目次を作成します。
目次には見出しへのリンクが設定されます。

このプラグインは二つのコードからできています。

プラグイン本体

プラグイン本体です。h1-h6を抽出し配列に格納します。またh1-h6にidを追加してリンク先にします。

jQuery.fn.toc = function(depth) {
    return this.each(function() {
        var headers, re, i;
        headers = [];
        re = new RegExp("h([1-" + depth + "])", "i");
        i = 0;
        $("*").each(function() {
            var ms;
            ms = $(this).get(0).tagName.match(re);
            if(ms) {
                $(this).prop("id", "header" + i);
                headers.push([
                    parseInt(ms[1]),
                    "<a href='#header" + i + "'>"
                    + $(this).html() + "</a>"
                ]);
                i++;
            }
        });
        $(this).append(array2ul(headers));
    });
}

配列をリストに

プラグイン本体で抽出した配列をulのリストにします。階層を反映します。

function array2ul(a) {
    var t, exlevel, level, i, j;
    t = "";
    exlevel = 0;
    for(i = 0; i <= a.length; i++) {
        level = i < a.length ? a[i][0] : 0;
        for(j = 0; j < Math.abs(exlevel - level); j++) {
            t += exlevel < level ? "<ul>" : "</ul>";
        }
        t += i < a.length ? "<li>" + a[i][1] + "</li>" : "";
        exlevel = level;
    }
    return t;
}

使い方

HTMLを次のようにします。
h1-h6を適切に使います。
目次をセットする箇所に「<div id="mokuji"></div>」などと書きます。bodyの先頭がよいでしょう。
スクリプトに「$("#mokuji").toc(3);」などと書きます。数字は見出しの深さです。「3」ならばh1からh3について目次を作成します。

<body>
<div id="mokuji"></div>
<h1>見出しA</h1>
<h2>見出しB</h2>
<p>本文。</p>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.toc.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mokuji").toc(3);
});
</script>
</body>

サンプル

サンプルとプラグインは次の通りです。

サンプルページ

jquery.toc.js

複数のテキストボックスの値を結合

テキストボックス(inputタグ)が大量にあって、これらをパラメータとしてPHPのファイルに送信する必要に迫られました。
一つずつnameを付けるのが基本ですが長くなるので、CSVとして渡し、配列化して使いたいと思います。

input

HTML

<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="button" id="mybtn" value="実行">

このようにinputタグが大量にあります。
実行ボタンを押すとそれぞれのテキストボックスの値をカンマ区切りで結合して、「test.php?q=val0,val1,val2,val3,val4」のような形で送信したいのです。
JavaScript(jQuery)で処理する方法を考えました。

jQuery

$(document).ready(function(){
    $("#mybtn").click(function(){
        var arrs = [];
        $("input.abc").each(function(){
            arrs.push($(this).val());
        });
        var url = document.location + "?q=" + arrs.join(",");
        document.location.href(url);
    });
});

このようにして「abc」というクラスのテキストボックスを全て配列に取得します。配列をカンマ区切りで結合します。
ここでは現在のファイル自身にパラメータを追加します。ファイル自身は「document.location」で取得できます。URLをセットすることもできます。

詳細は省略しますが、PHPとしては「$_get['q']」としてCSV("val0,val1,val2,val3,val4")を取得し、explodeで配列に分割して使います。

ピボットテーブルを表示するjQueryプラグイン

Excelにはピボットテーブルという機能があります。クロス集計と呼ぶ人もいます。
これをHTMLのテーブルで再現するjQueryプラグイン「jquery.pivot.js」を作りました。 (さらに…)

jQueryでチェックボックスを操作

前にも書いたことがあるかもしれませんが、jQueryでチェックボックスを操作する方法をまとめます。

次のHTMLのようなチェックボックスがあったとします。

<input type="checkbox" id="c0">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3" checked>
<input type="checkbox" id="c4" checked>

次のjQueryを実行します。

$("#c0").prop("checked", true);
$("#c1").prop("checked", "checked");
$("#c2").prop("checked", "dog");
$("#c3").prop("checked", false);
$("#c4").prop("checked", "");

上から3行はチェックを入れます。「checked」に「true」をセットするのが基本のようです。
3行目は「dog」とありますが、要するに空でない文字列ならば「true」と判断されるので何でもよいようです。

下から2行はチェックを外します。「checked」に「false」をセットするのが基本のようです。
最下行は空文字ですが「false」と判断されるため、これでも外れます。

※Chrome24、IE6、jQuery1.9.1で確認しました。

jQueryでattrの代わりにpropを使う

jQueryの1.9の変更点を調べていて大事なことに気付きました。
jQueryでclassなどを書き換えるときには「attr」を使っていましたが、実は1.6から非推奨になっていました。
代わりに「prop」を使います。使い方は同じようです。

次のようなHTMLがあったとします。

<div id="mydiv">test</div>

jQueryで次のようにするとclassをセットできます。

$("#mydiv").attr("class","apple");

※jQuery1.9.1で確認しました。

ページを開いたときにメッセージを表示するjQueryプラグイン

ウェブページを開いたときに注意メッセージを表示するjQueryプラグイン「jquery.opening.js」を作りました。
ページを開いたときにメッセージが表示されます。メッセージは変更できます。
「今後はこのメッセージを表示しない。」にチェックすると次回からは表示されません。クッキーを利用しています。

使い方

  1. プラグイン(jquery.opening.js)をダウンロードします。
  2. 別途、Downloads · carhartl/jquery-cookie · GitHubでjquery.cookie.jsをダウンロードします。※jQueryでcookieを使う | You Look Too Cool
  3. HTMLを書きます。後述のサンプルを参考にしてください。
  4. これらを同じフォルダに保存します。

(さらに…)

祝日に対応したカレンダーを挿入するjQueryプラグイン

JavaScriptで日本の祝日を判定する関数を書いたので、ついでにカレンダーを挿入するjQueryプラグインを書いてみました。
使い道がよく分からないですが。

プラグインです。
jquery.calendar_jp

年間カレンダーを作るサンプルです。
sample1

一か月カレンダーを作るサンプルです。
sample2

jQueryの最新版にリンクする

通常、jQueryを使うときは、公式サイトなどから「jquery.min.js」などをダウンロードして自分のサーバに置いておきます。
しかし、最近は、外部のサイトにリンクして使う方法が主流のようです。

本家に色々と用意されています。
jQuery CDN - provided by (mt) Media Temple

次のようにして使うと常に最新版を使うことができます。現在は1.8.3です。

<script src="http://code.jquery.com/jquery.min.js"></script>

次のリンク先は本家では紹介されていませんが、同様に使うことができます。

<script src="http://code.jquery.com/jquery-latest.js"></script>

ただ、この手法には「外部のサイト」のサーバがダウンしないこと、という条件が付きます。

そういう意味ではGoogleの方が堅牢かもしれません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

こちらは「常に最新版」というわけにはいきませんが、バージョンによってはプラグインが動かなかったりするケースもあるので、バージョンを固定して使いたい場合には意味があります。

「jQuery Calculator」を日本語化

前にjQuery用プラグイン「jQuery Calculator」を紹介しました。
You Look Too Cool » 電卓として使えるjQuery用プラグイン「jQuery Calculator」
元は英語ですがドイツ語、中国語などに変換する仕組みがあります。
日本語については対応していなかったので、勝手に作ってみました。

jQuery Calculator 日本語化

使い方は次のとおりです。
元のサイトはjQuery Calculatorです。ここで必要なファイルをダウンロードします。
日本語化用のファイルjquery.calculator-jaをダウンロードします。
次のようなHTMLを書きます。

<html>
<head>
<style type="text/css">
@import "jquery.calculator.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.calculator.js"></script>
<script type="text/javascript" src="jquery.calculator-ja.js"></script>
<script type="text/javascript">
$(function () {
    $('#basicCalculator').calculator({
        showOn: 'both',
        buttonImageOnly: true,
        buttonImage: 'calculator.png'
    });
});
</script>
</head>
<body>
<p><input type="text" id="basicCalculator"></p>
</body>
</html>
古い記事

タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報