Hatena::Groupasakura

浅倉卓司@blog風味? このページをアンテナに追加 RSSフィード

Error : RSSが取得できませんでした。

2007-03-30(Fri)

checkboxやselectを同期させるJavascriptって

| 23:07 |  checkboxやselectを同期させるJavascriptって - 浅倉卓司@blog風味? を含むブックマーク  checkboxやselectを同期させるJavascriptって - 浅倉卓司@blog風味? のブックマークコメント

 先日inputなどが所属しているformを調べていたのはcheckboxやselectを同期させるJavascriptを書くためだったのですが、「formに所属してるinput要素をピックアップしたほうが早いじゃん!」って事に気づいて*1結局使わなかったという。

 ところで、こんな感じだと重複してデータを送信しちゃうしradioで同期ができないし、こんな風だとテーブル組には使えないんだけど*2、うまい方法があったりするんでしょうかね。

*1:当初はonChangeとか書いてた。HTMLのテンプレートで出力してるから特に何も考えてなかったのです……。

*2:それともformでtrを囲ってもいいものかな?

トラックバック - http://asakura.g.hatena.ne.jp/asakura-t/20070330

2007-03-07(Wed)

inputなどが所属しているformを取得するのってどーするんでしょ?

| 00:10 |  inputなどが所属しているformを取得するのってどーするんでしょ? - 浅倉卓司@blog風味? を含むブックマーク  inputなどが所属しているformを取得するのってどーするんでしょ? - 浅倉卓司@blog風味? のブックマークコメント

 単に

<script>
function foo(input) {
  var form = input.parentForm;
  // 各種処理
}
</script>
<form method=post action="foo.cgi">
<input type=radio name=test value=1 onclick="foo(this)">
</form>

――みたいなことをしたいのですが。


追記

 ありがとうございます>trickstar_osさん

 ちなみにずっとMozillaのDOMのドキュメントを読んでて「それっぽいのないなー」と思っていたのでした。。。

 w3.orgのを読んだらちゃんと書かれていたので、ちゃんと規格書読めって話ですね。とほほ。

trickstar_ostrickstar_os2007/03/08 06:49input.formかな
http://www.tohoho-web.com/js/form.htm#form2

トラックバック - http://asakura.g.hatena.ne.jp/asakura-t/20070307

2005-10-19(Wed)

UI改善(固定桁入力編)、の続き

| 23:11 |  UI改善(固定桁入力編)、の続き - 浅倉卓司@blog風味? を含むブックマーク  UI改善(固定桁入力編)、の続き - 浅倉卓司@blog風味? のブックマークコメント

http://asakura.g.hatena.ne.jp/asakura-t/20051014/1129302264

# secondlife 『onKeypress(onKeydown)でイベント拾って変更時にeventlistenerにfunction登録すれば望みの動作ができると思います。』

――とコメントをいただいたのでEventListenerについて調べたのですが、addEventListenerってのはどうやらInternet Explorerでは使えないみたいなんですな。

 まあでも、確かにonkeydownとonkeyupの両方のイベントをチェックして入力値が変更されたのかを確認すれば、[Tab]で移動したときにフォーカスを動かさなくて済みそうだ。んでも、全部の入力項目にonkeydownとonkeyupを書くなんて面倒なことをするのは嫌だしなぁ。


 ……とか思っていたら、formのelementsから全入力要素を拾えるのを思い出した。

 じゃあtypeがtextでmaxlengthが設定されている要素にイベントを追加すればいいんじゃね? ついでにnameを気にせずに次の要素を拾えるし。

 というわけで書いてみたのが以下のコード:

function auto_jump( form ) {
  var length_attr = "maxlength";
  for (var i=0; i < form.elements.length - 1; i++) {
    var elem = form.elements[i];
    if (! elem.type == "text") continue;
    if (! elem.getAttribute(length_attr)) continue;

    elem.next = form.elements[i+1];
    elem.onkeydown = function() {
      this.pre_value = this.value;
    }
    elem.onkeyup = function() {
      if (this.pre_value == this.value) return;
      if (this.value.length < this.getAttribute(length_attr)) return;
      this.pre_value = this.value;
      this.next.focus();
      if (this.next.type == "text") this.next.select();
    }
  }
}

 サンプルはこちら

 JavaScriptは書き慣れてないのでどーにも野暮ったいですが*1

 これなら既存のフォームに追加しやすいかな。


 それにしても意外だったのは「そんなのはココにあるよ!」って言われなかったことだ。

 うーむ。

*1:誰か添削して~、とか思わなくもない。

トラックバック - http://asakura.g.hatena.ne.jp/asakura-t/20051019
2004 | 01 | 02 | 03 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 08 | 09 | 10 | 11 | 12 |
2007 | 02 | 03 | 04 | 05 | 06 | 07 | 10 | 11 | 12 |
2008 | 02 | 03 | 04 | 06 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 02 | 03 | 04 | 05 | 07 | 08 | 10 | 11 | 12 |
2013 | 01 | 05 | 07 |
2014 | 01 | 02 |
2016 | 01 |
2017 | 01 | 05 |