「JavaScript」の版間の差分
提供: sha.ngri.la
細 (→リロードしないとJavaScriptが起動しない) |
|||
| (同じ利用者による、間の6版が非表示) | |||
| 1行目: | 1行目: | ||
| − | |||
<onlyinclude> | <onlyinclude> | ||
[[JavaScript]]を使った際のメモ | [[JavaScript]]を使った際のメモ | ||
</onlyinclude> | </onlyinclude> | ||
==イベントハンドラ== | ==イベントハンドラ== | ||
| − | + | ;onBlur | |
| − | + | :ページやフォーム要素からフォーカスが外れた時に発生 | |
| − | + | ;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] | ||
| + | |||
==formの要素にアクセスする== | ==formの要素にアクセスする== | ||
<code>form</code>の<code>id</code>が<code>form_id</code>の<code>form</code>内の、<code>id</code>が<code>field_id</code>に入力された値を変数<code>text</code>に代入する。 | <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; | 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> | ||
| + | <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> | ||
| + | |||
| + | </pre> | ||
[[Category:JavaScript]] | [[Category:JavaScript]] | ||
| − | |||
2017年8月2日 (水) 04:14時点における最新版
JavaScriptを使った際のメモ
イベントハンドラ
- onBlur
- ページやフォーム要素からフォーカスが外れた時に発生
- onLoad
- ページや画像を読み込んだときに発生
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>