とりあえずの備忘録

主にパソコンやインターネットに関するメモ

WEBデザイン

Javascript グローバル変数に送信状態を格納してフォームの二重送信を防ぐ

グローバル変数の値を用いて二重送信を防ぐ 「HTML部分」 <form onSubmit="return CheckSubmitted();" action="test.cgi" method="post"> <input type="submit" value="送信"> </form>

Javascript 送信ボタンを無効化してフォームの二重送信を防ぐ

フォームの送信ボタンを押したら無効化して二重送信を防ぐ 「HTML部分」 <form action="test.cgi" method="post"> <input type="submit" value="送信" onclick="DisableButton(this);" > </form>

Javascript 子ウィンドウからwindow.openerを使って親ウィンドウを操作する

window.openで開いた子ウィンドウからwindow.openerプロパティを使って親ウィンドウのテキストボックスに値を設定する 「親ウィンドウ部分」 <html> <head><title>親ウィンドウ</title></head> <body> <input type="button" value="子ウィンドウを開く" onClick="window.open('sub.html','sub','width=640,height=480');return false;"> <div id="title01"></div> </body></html>

Javascript セレクトメニューで順番を重複しないように選択させる

順番を変更すると残りの順番をひとつずつずらして行き、重複しないようにする 「Javascript部分」 <script type="text/javascript">

Javascript フォームのチェックボックスを全選択するボタンを作成する

フォームのチェックボックスを全選択するボタンを作成する 「Javascript部分」 function allcheck(targetForm,flag){ for(n=0;n<=targetForm.length-1;n++){ if(targetForm.elements[n].type == "checkbox"){ targetForm.elements[n].checked = flag; } } }

HTML・CSS テキストエリアにフォーカスがきたとき全選択状態にする

テキストエリア内の記述をコピーして利用してもらうため、テキストエリアにフォーカスがきたときに中身を全選択された状態にする。 テキストエリアにフォーカスがきたら全選択状態にする 「HTML」 <textarea readonly rows="4" cols="40" onclick="this.focus();this.select()"> ほげほげ、もじもじ、コード、ソース </textarea>

Javascript 確認ダイアログを表示する

フォームからtest.cgiへ送信するときに確認ダイアログを表示する 「Javascript部分」 <script type="text/javascript"> <!-- function DispKakunin(){ if (window.confirm('本当に送信しますか?')) { return true; //OKボタン } else { return false; //キャンセルボタン } } // --> </script>

Javascript ランダムテーブルを作る

Javascriptを使って配列をシャッフルする 1~5まで整数値のランダムテーブルを作成する。 <script type="text/javascript">

Javascript ポップアップウィンドウを開く

window.openメソッドを使ってポップアップウィンドウを開く ポップアップウィンドウは「幅300、高さ400、アドレスバー無、メニューバー無、ツールバー無、スクロールバー無、ウィンドウズサイズ変更可」。 「Javascript部分」 <script type="text/javascript">

Javascript JavascriptでHTMLを書き換える

innerHTMLプロパティを操作してHTMLを書き換える 「Javascript部分」 <script type="text/javascript"> <!-- function ChgMyText() { document.getElementById('mytext').innerHTML = 'BBBB'; } // --> </script>

HTML・CSS 余白を決めるmarginとpadding

marginは外側、paddingは内側の余白を指定する。 外側の余白を上下10px、左右15px、内側の余白を上下左右5pxにする margin: 10px 15px 10px 15px; padding: 5px 5px 5px 5px; 指定の順番は「上」「右」「下」「左」になり、時計回りで指定する。

Javascript リンク先のURLをマウスを重ねても分からないようにする

リンク先のURLをマウスを重ねても分からないようにする 「Javascript部分」 <script type="text/javascript"> <!-- function hide_link(){ window.status = ''; return true; } if (document.layers) document.captureevents(event.mouseover | event.mouseout); document.onmouseover = hid</script>…