Hatena::ブログ(Diary)

すたら日記

2012年05月09日

jquery.addInputArea

Demo

http://www.usamimi.info/~sutara/sample/add-input-area/

GitHub

https://github.com/sutara79/jquery.add-input-area


f:id:sutara_lumpur:20120509182823p:image


f:id:sutara_lumpur:20120509182824p:image


f:id:sutara_lumpur:20120509182825p:image


入力欄を動的に増減させることができます。

テキストボックス、テキストエリアの両方に対応しています。


ライセンス

MITライセンス (http://www.opensource.org/licenses/mit-license.php)

※改変、再配布はご自由にどうぞ。


使用にあたっての注意点

  • 増減する入力欄には、下記のようにCSSクラスを指定する必要があります。
    要素の種類は問いません。
    li でも tr でもOKです。
    また、子孫関係も、直下に置く必要はありません。
    <* id="hoge">
    	<* class="hoge_var"(この要素が増減する)>
    		<input name="hoge_0">
    	<* class="hoge_del"(削除ボタン)>
    <* class="hoge_add"(追加ボタン。リストの外に置く。)>
    
    
    【例】
    <ul id="list1">
    	<li class="list1_var">
    		<input type="text" name="list1_0">
    	</li>
    	<button class="list1_del">削除<button>
    </ul>
    <button class="list1_add">追加</button>
    
  • 入力欄のname, id属性は、
    (任意の文字列) + (番号)
    の形式で記述して下さい。
    番号は、必ずゼロから始めて下さい。
    "任意の文字列"の末尾は、当然、数字で終わってはいけません。
    アンダーバー"_"を挟んだりして対処して下さい。
    例: list1_0

    ただし、独自属性の'name_format', 'id_format'を設定することで、
    柔軟なname, id属性を名付けられます。
    CakePHPのname属性の形式などに対応できます。 (data[posts][mail][0] など)
    <label
    	id_format="hoge_%d_fuga"
    	for="hoge_0_fuga"
    >
    <input
    	id_format="hoge_%d_fuga"
    	id="hoge_0_fuga"
    	name_format="hoge_%d_fuga"
    	name="hoge_0_fuga"
    >
    
    ※ 以降、hoge_1_fuga, hoge_2_fuga... と名付けられる。
    
  • id, for属性は"id_format"属性、
    name属性は"name_format"属性に従って、連番を与えられます。
    独自属性の"id_format", "name_format"を使わない場合は、
    共通の命名規則の
    (任意の文字列) + (番号)
    に従ってください。
  • プラグインは、リスト項目内でname属性を持つ要素のname属性とid属性、
    そして、for属性を持つ要素のfor属性を書き換えます。
    input要素だけでなく、どんな要素に対しても実行するので、注意して下さい。


オプション

名前area_var
説明動的に増減する要素に共通するCSSクラス名
初期値

リストのid属性に'_var'を加えたもの。

リストにid属性がなければ(そんなことは考えられないが)、'aia_var'。

実際のソースは下記。

(id) ? '.' + id + '_var' : '.aia_var'

名前area_del
説明

削除ボタンとともに表示・非表示が切り替わる削除エリアに共通するCSSクラス名。

必須ではない。

初期値false

名前btn_del
説明削除ボタンに共通するCSSクラス名
初期値

リストのid属性に'_del'を加えたもの。

リストにid属性がなければ(そんなことは考えられないが)、'aia_del'。

実際のソースは下記。

(id) ? '.' + id + '_del' : '.aia_del'

名前btn_add
説明追加ボタンのCSSクラス名
初期値

リストのid属性に'_add'を加えたもの。

リストにid属性がなければ(そんなことは考えられないが)、'.aia_add'。

実際のソースは下記。

(id) ? '.' + id + '_add' : '.aia_add'

名前maximum
説明増減する要素の最大数 (数値で指定する)
初期値false (無制限)

masahiromasahiro 2012/05/28 19:58 返答遅くなってしまいすみません。
そして、私のわがままに合わせた開発をありがとうございます。
私の現在の開発してる環境で動作確認させていただき、
正常に動きました。ありがとうございます。

ただ、非常に申し訳ございませんが、
複数の入力欄の増減を希望しておりまして

<table><tr>

--------
ここから
--------

<ul id='list1'>
<li>
  <tr>
<td>
<input='text' name='text01_0'>
</td>

<td>
<input='text' name='text02_0'>
</td>

<td>
<input='text' name='text03_0'>
</td>
  </tr>

</li>
</ul>

--------
ここまで
--------

</tr></table>
<input type='button' value='追加' id='list1_add'>



ここから〜ここまでを追加ボタンを押すたびに増えるようにしたいです。
tableでtrからなので入力の欄が下にどんどん増えてくイメージです。

もしできれば
1列目のinputの名前をそれぞれ任意の文字列_0(上記のイメージ)
2列目以降は追加が押されるたびにinputのname属性をそれそれ任意の文字列_1、_2と
自動的にふられるようにしたいです。

上記の例だと
2列目は text01_1、text02_1、text03_1
3列目は text01_2、text02_2、text03_2
(日本語ヘタですみません。)



もし可能でしたらこちらはできますでしょうか?

sutara_lumpursutara_lumpur 2012/05/29 19:05 @masahiro さん
新バージョンの3.0を公開しました。
おそらく、これでmasahiroさんの要望にかなう動作をするようになったと思います。
なお、バージョン2.1から仕様がかなり変わったのでご注意下さい。

masahiromasahiro 2012/05/31 15:08 @sutara_lumperさん
新バージョンありがとうございます。
動作確認できました。

こちら推奨ブラウザがchromeかfirefoxということでそちらでは
動作確認できましたが、
推奨ブラウザではないIEでは動きませんでした。(入力欄にname属性を含めると追加押しても増えません。削除ボタンは出てきます。)

IEでも対応していただくのって可能でしょうか?
前回の時点でIEについてはお伝えしておくべきでした。すみません。
ムリでしたら大丈夫です!
わがまま言い過ぎてすみませんm(_ _)m

masahiromasahiro 2012/06/01 00:44 IEでの状態を自分で調査してみましたが、
入力フォームにname属性をつけると動かなくなることがわかり
jsファイルで内容は理解しかねていますが、
[name]となっている箇所をnameにしたところIEでも動くようになりました。

sutara_lumpursutara_lumpur 2012/06/01 02:34 @masahiroさん
IEでの動作確認の情報、ありがとうございます。
ただ、私の環境、Windows Vista + IE9 では不具合は起こりませんでした。
旧バージョンのIEでの動作確認をしたいのですが、私にはその方法がありません。

これまでは旧バージョンのIEの動作確認に"IETester"を使っていましたが、
どうにも不安定で、本当にIEの特定のバージョンの表示・動作を
再現できているのか疑わしいのです。
今日、新たに"IECollection"を試してみようとしましたが、
IE6は起動してすぐにフリーズしますし、
IE7,IE8はサポートされていませんでした。
IE9の機能で、F12キーを押して開発者用画面を開けばIE7,IE8の表示を
再現できるそうですが、そちらでは問題ありませんでした。
しかし、おそらくmasahiroさんのIEのバージョンは8以下でしょうから、
やはりこれもJavaScriptの動作確認には向いていないのでしょう。

というわけで、解決できる目算は全くありませんが、
masahiroさんのWindowsとIEのバージョンを教えて下さい。
ダメ元でGoogleで検索すれば、何か分かるかもしれません。

sutara_lumpursutara_lumpur 2012/06/01 02:36 あ、書き忘れました。
[name] を name に変更したら、意味が全く違ってしまいます。
[name]は 『name属性を持つ要素』を抽出するためのセレクタです。
これを name と書くと、『nameというHTML要素』を抽出することになってしまいます。

masahiromasahiro 2012/06/12 19:54 返答遅くなってしまいすみません。
いくつか検証してみまして、下記の内容で動くようになりました
、、、min.jsの
function(e){

function a(g,f){

function(i){

function(k,l){

e(l).val(""); ←こうしたら動きました。value属性があるのは空にして、ないのは特になにもおこらずな動きだと思います。

以上です。
いろいろわがまま聞いていただき、
ありがとうございました。

masahiromasahiro 2012/08/21 13:27 @sutara_lumperさんご無沙汰しております。
masahiroです。

現在、項目追加のJQueryを使わせていただいておりまして、
ちょっと謎な現象がおきてしまうため質問させていただきました。

たとえばですが、
追加対象の行に
セレクトボックスとテキストボックスの2つがあり
セレクトボックスの選択肢に、
・マスクしない(初期値)
・マスクする
の2つがあったとします。
ここで同じファイル内に書いたJavaScriptを使い
セレクトボックスで"マスクする"を選択したら、テキストボックスのdisableモードがtrueになり
テキストボックスへの入力が不可になるようにしました。


行追加への対応のため
同じファイル内に書いたJavaScriptには引数として
セレクトボックスのnameをもってくることで
_0、_1、_2のこの部分から現在どの行なのかを
判定し、どの行のセレクトボックスが""マスクする"を選択されたため
どの行のテキストボックスをマスクさせればよいか
正しく判定させています。


ここで、行追加のJQueryを使ったところ
なぜか1行目だけJavaScriptが動かず
マスクされません。
逆に2行目以降の増やした行はすべて
正常にマスクされます。


JavaScript内で
var Option = document.Form名.セレクトボックスの名前.selectedIndex;
として今何が選択されてるか判定してますが
なぜか行追加したときの1行目だけOptionがundefinedになります。

何か原因はわかりますでしょうか?
下手な説明ですみません。

sutara_lumpursutara_lumpur 2012/08/21 13:53 @masahiro さん
なんだか難しそうです…。
これから原因を探ってみます。

sutara_lumpursutara_lumpur 2012/08/21 15:44 @masahiro さん
masahiroさんが望んでいると思われる処理のサンプルを作ってみました。
http://www.usamimi.info/~sutara/sample/addInputArea/#index_08

その際に、ソースコードの不備が見つかったので、新バージョンの4.2を公開しました。
これまでは、"追加"ボタンがクリックされてからその都度先頭のコピーを作成し、
nameやvalueを変更していました。
これを、ページ読み込み完了時にコピー用の原型を作っておき、
"追加"ボタンのクリックに応じてコピーを作成するようにしました。

…今まで、なぜこの手順に変えなかったのでしょうか…。
ほんの2・3行追加するだけでOKなのにorz

ともかく、これで初期状態を正しく記憶しておくことができるようになりました。

masahiromasahiro 2012/08/24 00:58 @sutara_lumpurさん

返事遅くなりすみません。どうもありがとうございます。
ちょっとまだ新しいバージョンで試せてないのですが
明日やってみます!ありがとうございます!

もう1つ伺い事がございまして、
http://www.html5.jp/library/cpick.html
今回項目追加をするものにこのカラーピッカーをいれてます
カラーピッカー表示させるボタンと、カラーの値を表示させるtextになります。
カラーピッカーはサイトのjsファイルと、サンプルの記述方法通りやれば
動くのですが、行追加のjsファイルと併用すると
行追加はうまく動くのですが、カラーピッカーが動かなくなります。

もし何か原因などがわかればぜひ探っていただきたいのですが
お願いしても大丈夫でしょうか?

私の調査では全くわからずな状況で(T T)

sutara_lumpursutara_lumpur 2012/08/24 10:04 @masahiro さん
addInputAreaの最新版と、カラーピッカーを併用してみました。
たしかに、追加した方のカラーピッカーは動作しませんね。
おそらく、カラーピッカーは、ページ読み込み時に存在する要素に対して
イベントを設定した後は、それっきりなのかもしれませんね。
もう少し詳しく原因を探ってみます。

sutara_lumpursutara_lumpur 2012/08/24 11:53 サンプルを作ってみました。
『とりあえず動く』という程度のものです。
http://d.hatena.ne.jp/sutara_lumpur/20120824/1345775733

masahiromasahiro 2012/08/29 15:05 @sutara_lumpurさん
返信遅くなりすみません!!ありがとうございます!!
作っていただいたファイルを私の環境に移植しまして無事動くことが確認できました。

行追加とカラーピッカーを併用したもので、1点さらにできればお願いしたい仕様がございまして
作っていただいたサンプルだと

テキストがあって、テキストにフォーカスをあてるとカラーピッカーが表示され、
そこからカラーを選択し、OKを押すとテキストにカラー値が表示される。

だと思いますが、
・ボタン:クリックするとカラーパレットが表示
・テキスト:カラーパレットで選択したカラー値が入る。フォーカスの有無でカラーパレット表示はなし
・カラー表示の正方形:<div id='**' style='width:20px;height:20px; border:1px solid; float:both background-color:#******'></div>のような記述で、カラーパレットで選択したカラー値を実際に色として表示しておくもの。
カラーパレットでOKをクリックし、テキストにカラー値が入るのと同時にこの正方形の色も変わる。

この3つを1つの行として、カラーパレットの動きと行追加を併用してできるようにしたいです。
テキストと正方形にidをふって、テキストにはvalueにカラー値、正方形にはstyleのbackgroudcolorにカラー値を
いれるような流れかと思うのですが、私の環境でうまく動作しません。

別途、カラーパレットを使わず、テキストを直接入力で変更し、フォーカスをはずしたときも
正方形の色が変わるようにしていたいです。

すみません。ご教授お願いしますm(_ _)m

私の開発の案件で非常に役立たせております。本当にいつもありがとうございます。

sutara_lumpursutara_lumpur 2012/08/29 15:34 @masahiro さん
すみません。
さすがにそれは、このプラグインの問題とはかけ離れたことなので、応じられません。
機能の追加や改変をご自分でできないのなら、HTML5対応のブラウザのみですが、
<input type="color">を使ってみてはどうでしょう?

<input type="color">−HTML5タグリファレンス
http://www.htmq.com/html5/input_type_color.shtml

AsukaAsuka 2013/04/22 17:53 はじめまして、AddInputAreaをご提供頂きありがとうございます。
このプラグインはすごく使い勝手がいいのですが、どうしても実現させたい機能があり、ご相談させて頂きました。
テキストボックスを追加する際に、テキストボックスのサイズ(長さ)を変更して追加したいと考えております。
(一つ目は10px、二つ目は15px、三つめは30px・・・のように)
具体的には、ドラッグした文字列の長さを取得し、その長さをテキストボックスのサイズにするつもりです。
プラグイン内の「追加ボタンを押した場合の処理」の中で、innerHTMLの値を書き換えれば・・と思ったのですが、
クローンの値が書き換わりません。
以下のように書き換えてみました。

//--------------------------------------------------------
//『追加』ボタンを押した場合の処理
//--------------------------------------------------------
  〜 中略 〜
   //ドラッグした文字列の長さでtextboxのサイズを指定する
var TextLength = gettext(); /*←自作の関数でgettext()から文字列の長さを取得します
//書き換え用のHTML作成
var rehtml = ''
var new_obj = $(new_list).find(options.area_var).eq(0);
var re_html = new_obj.context.innerHTML.replace(/__size__/mg, TextLength + "px");
$(new_list).find(options.area_var).eq(0).innerHTML = re_html;
$(elem).append(new_list);

//入力欄が2つ以上になるので、削除ボタンを表示する
$(elem).find(options.area_del).show();



<<<HTML>>>
<h2>This is a heading</h2>
<p class="first">This is a paragraph.</p>

<ul id="list3" >
<li class="list3_var" style="list-style-type:none;">
<input type="text" size="__size__" name="list3_0">
<img class="list3_del" src="img_del.png">
</li>
</ul>
<a href="javascript:void(0)" class="list3_add">Add</a>



いろいろと試しているのですが、どうしてもうまくいきません。一番最初と同じサイズのテキストボックス(クローン?)の
サイズで追加されてしまいます。

突然のお願いで大変恐縮ですが、もし何かお分かりになればご教授頂けますでしょうか。
宜しくお願い申し上げます。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。