「JavaScript」の版間の差分

2017年8月2日 (水) 04:14時点における最新版

JavaScriptを使った際のメモ

イベントハンドラ

onBlur: ページやフォーム要素からフォーカスが外れた時に発生
onLoad: ページや画像を読み込んだときに発生

JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM｜PHP & JavaScript Room

formの要素にアクセスする

formのidがform_idのform内の、idがfield_idに入力された値を変数textに代入する。

var text = document.forms.form_id.elements.field_id.value;

formのidがform_idのform内の、idがfield_idに、変数textの値を入力する。

var text = "sample text";
document.forms.form_id.elements.field_id.value = text;

formのidを得る。

var formid = document.forms[0].id

formのidが代入されたfromidを利用してformの要素にアクセスしたい場合は、

document.forms[formid].elements.member_lat.value;

Sample

sample1_1のフィールドに入力した後、tabでフィールドを移動すると、sample1_2のフィールドにsample1_1の内容が反映される。

<script type="text/javascript">
  function textmove() {
    var text = document.forms.sample1.elements.sample1_1.value;
    document.forms.sample1.elements.sample1_2.value = text;
  }
</script>


<form id="sample1" class="form-horizontal">
  <label class="control-label" for="sample1_1">sample1_1:</label>
  <input type="text" name="sample1_1" onBlur="textmove()" >
  <label class="control-label" for="sample1_2">sample1_2:</label>
  <input type="text" name="sample1_2">
</form>

@@ 1行目: / 1行目: @@
-{{googlead}}
 <onlyinclude>
 [[JavaScript]]を使った際のメモ
 </onlyinclude>
 ==イベントハンドラ==
-<dl class="horizontal">
+;onBlur
-<dt>onBlur</dt>
+:ページやフォーム要素からフォーカスが外れた時に発生
-<dd>ページやフォーム要素からフォーカスが外れた時に発生</dd>
+;onLoad
-</dl>
+:ページや画像を読み込んだときに発生
 *[http://phpjavascriptroom.com/?t=js&p=event#a_event JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM｜PHP & JavaScript Room]
 ==formの要素にアクセスする==
 <code>form</code>の<code>id</code>が<code>form_id</code>の<code>form</code>内の、<code>id</code>が<code>field_id</code>に入力された値を変数<code>text</code>に代入する。
@@ 30行目: / 30行目: @@
 document.forms[formid].elements.member_lat.value;
 </pre>
+===Sample===
+<code>sample1_1</code>のフィールドに入力した後、<code>tab</code>でフィールドを移動すると、<code>sample1_2</code>のフィールドに<code>sample1_1</code>の内容が反映される。
+<html>
+<script type="text/javascript">
+  function textmove() {
+    var text = document.forms.sample1.elements.sample1_1.value;
+    document.forms.sample1.elements.sample1_2.value = text;
+  }
+</script>
-==リロードしないとJavaScriptが起動しない==
-*[http://qiita.com/kumagi/items/289ccadf344f32613304 //= require jquery.turbolinks]
+<form id="sample1" class="form-horizontal">
+  <label class="control-label" for="sample1_1">sample1_1:</label>
+  <input type="text" name="sample1_1" onBlur="textmove()" >
+  <label class="control-label" for="sample1_2">sample1_2:</label>
+  <input type="text" name="sample1_2">
+</form>
+</html>
+<pre>
+&lt;script type="text/javascript"&gt;
+  function textmove() {
+    var text = document.forms.sample1.elements.sample1_1.value;
+    document.forms.sample1.elements.sample1_2.value = text;
+  }
+&lt;/script&gt;
+&lt;form id="sample1" class="form-horizontal"&gt;
+  &lt;label class="control-label" for="sample1_1"&gt;sample1_1:&lt;/label&gt;
+  &lt;input type="text" name="sample1_1" onBlur="textmove()" &gt;
+  &lt;label class="control-label" for="sample1_2"&gt;sample1_2:&lt;/label&gt;
+  &lt;input type="text" name="sample1_2"&gt;
+&lt;/form&gt;
+</pre>
 [[Category:JavaScript]]
-{{googlead}}