「JavaScript」の版間の差分

提供: sha.ngri.la
移動先: 案内検索
(イベントハンドラ)
 
(同じ利用者による、間の5版が非表示)
1行目: 1行目:
{{googlead}}
 
 
<onlyinclude>
 
<onlyinclude>
 
[[JavaScript]]を使った際のメモ
 
[[JavaScript]]を使った際のメモ
 
</onlyinclude>
 
</onlyinclude>
 
==イベントハンドラ==
 
==イベントハンドラ==
:onBlur
+
;onBlur
;ページやフォーム要素からフォーカスが外れた時に発生
+
:ページやフォーム要素からフォーカスが外れた時に発生
:onLoad
+
;onLoad
;ページや画像を読み込んだときに発生
+
:ページや画像を読み込んだときに発生
 
*[http://phpjavascriptroom.com/?t=js&p=event#a_event JavaScriptのイベントハンドラ一覧|イベント|JavaScript/DOM|PHP & JavaScript Room]
 
*[http://phpjavascriptroom.com/?t=js&p=event#a_event JavaScriptのイベントハンドラ一覧|イベント|JavaScript/DOM|PHP & JavaScript Room]
  
31行目: 30行目:
 
document.forms[formid].elements.member_lat.value;
 
document.forms[formid].elements.member_lat.value;
 
</pre>
 
</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>
  
  
 +
<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]]
 
[[Category:JavaScript]]
{{googlead}}
 

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

JavaScriptを使った際のメモ

イベントハンドラ

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

formの要素にアクセスする

formidform_idform内の、idfield_idに入力された値を変数textに代入する。

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

formidform_idform内の、idfield_idに、変数textの値を入力する。

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

formidを得る。

var formid = document.forms[0].id

formidが代入された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>