フォームの最近のブログ記事

とても簡易的なバーチャルキーボードのスクリプトです。

<form> <input type="text" size="40" name="inpbox"><br> <input type="button" value="0" onClick="inpbox.value = inpbox.value + '0';"> <input type="button" value="1" onClick="inpbox.value = inpbox.value + '1';"> <input type="button" value="2" onClick="inpbox.value = inpbox.value + '2';"> <input type="button" value="3" onClick="inpbox.value = inpbox.value + '3';"> <input type="button" value="4" onClick="inpbox.value = inpbox.value + '4';"> <input type="button" value="5" onClick="inpbox.value = inpbox.value + '5';"> <input type="button" value="6" onClick="inpbox.value = inpbox.value + '6';"> <input type="button" value="7" onClick="inpbox.value = inpbox.value + '7';"> <input type="button" value="8" onClick="inpbox.value = inpbox.value + '8';"> <input type="button" value="9" onClick="inpbox.value = inpbox.value + '9';"> <input type="button" value="クリア" onClick="inpbox.value = '';"> <br> <input type="button" value="あ" onClick="inpbox.value = inpbox.value + 'あ';"> <input type="button" value="か" onClick="inpbox.value = inpbox.value + 'か';"> <input type="button" value="さ" onClick="inpbox.value = inpbox.value + 'さ';"> <input type="button" value="た" onClick="inpbox.value = inpbox.value + 'た';"> <input type="button" value="な" onClick="inpbox.value = inpbox.value + 'な';"> <input type="button" value="は" onClick="inpbox.value = inpbox.value + 'は';"> <input type="button" value="ま" onClick="inpbox.value = inpbox.value + 'ま';"> <input type="button" value="や" onClick="inpbox.value = inpbox.value + 'や';"> <input type="button" value="ら" onClick="inpbox.value = inpbox.value + 'ら';"> <input type="button" value="わ" onClick="inpbox.value = inpbox.value + 'わ';"> <br> <input type="button" value="い" onClick="inpbox.value = inpbox.value + 'い';"> <input type="button" value="き" onClick="inpbox.value = inpbox.value + 'き';"> <input type="button" value="し" onClick="inpbox.value = inpbox.value + 'し';"> <input type="button" value="ち" onClick="inpbox.value = inpbox.value + 'ち';"> <input type="button" value="に" onClick="inpbox.value = inpbox.value + 'に';"> <input type="button" value="ひ" onClick="inpbox.value = inpbox.value + 'ひ';"> <input type="button" value="み" onClick="inpbox.value = inpbox.value + 'み';"> <input type="button" value="り" onClick="inpbox.value = inpbox.value + 'り';"> <br> <input type="button" value="う" onClick="inpbox.value = inpbox.value + 'う';"> <input type="button" value="く" onClick="inpbox.value = inpbox.value + 'く';"> <input type="button" value="す" onClick="inpbox.value = inpbox.value + 'す';"> <input type="button" value="つ" onClick="inpbox.value = inpbox.value + 'つ';"> <input type="button" value="ぬ" onClick="inpbox.value = inpbox.value + 'ぬ';"> <input type="button" value="ふ" onClick="inpbox.value = inpbox.value + 'ふ';"> <input type="button" value="む" onClick="inpbox.value = inpbox.value + 'む';"> <input type="button" value="ゆ" onClick="inpbox.value = inpbox.value + 'ゆ';"> <input type="button" value="る" onClick="inpbox.value = inpbox.value + 'る';"> <input type="button" value="を" onClick="inpbox.value = inpbox.value + 'を';"> <br> <input type="button" value="え" onClick="inpbox.value = inpbox.value + 'え';"> <input type="button" value="け" onClick="inpbox.value = inpbox.value + 'け';"> <input type="button" value="せ" onClick="inpbox.value = inpbox.value + 'せ';"> <input type="button" value="て" onClick="inpbox.value = inpbox.value + 'て';"> <input type="button" value="ね" onClick="inpbox.value = inpbox.value + 'ね';"> <input type="button" value="へ" onClick="inpbox.value = inpbox.value + 'へ';"> <input type="button" value="め" onClick="inpbox.value = inpbox.value + 'め';"> <input type="button" value="れ" onClick="inpbox.value = inpbox.value + 'れ';"> <br> <input type="button" value="お" onClick="inpbox.value = inpbox.value + 'お';"> <input type="button" value="こ" onClick="inpbox.value = inpbox.value + 'こ';"> <input type="button" value="そ" onClick="inpbox.value = inpbox.value + 'そ';"> <input type="button" value="と" onClick="inpbox.value = inpbox.value + 'と';"> <input type="button" value="の" onClick="inpbox.value = inpbox.value + 'の';"> <input type="button" value="ほ" onClick="inpbox.value = inpbox.value + 'ほ';"> <input type="button" value="も" onClick="inpbox.value = inpbox.value + 'も';"> <input type="button" value="よ" onClick="inpbox.value = inpbox.value + 'よ';"> <input type="button" value="ろ" onClick="inpbox.value = inpbox.value + 'ろ';"> <input type="button" value="ん" onClick="inpbox.value = inpbox.value + 'ん';"> </form>

以上です。

Webサービスなどを利用していると、フォームをフォーカス移動時やクリック時に全て選択させ、テキストがコピーしやすくなっていることがあります。こういう小さい気配りですが利用者側からすれば手間が省けることはとても助かります。自作CGIなどに実装してみては。

フォーカス移動時にフォームを選択した状態にしておく

クリック時にフォームを選択した状態にしておく

もちろん下のようなテキストエリアにも応用が利きます。
－快速マリンライナー2号岡山行の停車駅－ 鬼無 端岡 国分 坂出 児島 上の町 木見 植松 茶屋町 早島 妹尾 備前西市 大元

西暦から干支を求めるスクリプトです。

下のタグをHTMLソースの<HEAD></HEAD>の間に挿入します。

<script type="text/javascript">
<!--
function Eto(year) {
    var arr1 = new Array("庚","辛","壬","癸","甲","乙","丙","丁","戊","己");
    var arr2 = new Array("申","酉","戌","亥","子","丑","寅","卯","辰","巳","午","未");
    if (year != "" && year != null) {
       alert(arr1[year % 10] + arr2[year % 12]);
    }
}
// -->
</script>

そして、次のタグを好きな場所に記述します。

<form onSubmit="Eto(iyear.value);return false">
西暦：<input type="text" size="20" name="iyear" id="iyear" value="2009">年<br>
<input type="button" value="求める" onClick="Eto(iyear.value)">
</form>

求めたい年を西暦で入力し、求めるをクリックすれば、
干支がダイアログで表示されます。
計算方法については、干支 - Wikipediaを参考にしました。

サンプル：

西暦：年

シンプルなサイコロを作ってみます。(えｗ
下のようなタグを適当な場所に記述してください。
ボタンをクリックすると、1から6までのランダムな数字がでてきます。

<input type="button" onclick="alert(Math.floor(Math.random() * 6) + 1);" value="サイコロを振る">

よくわかる(か知らない)解説：
Math.random()は見ての通り、乱数(ランダムな数)を発生させます。
Math.floor()は、小数点以下を切り捨てて整数にします。
ですから・・・Math.random() * 6は、0.**********から5.**********までが出ます。
それを、Math.floor()を使って、小数点以下切捨てして、
それを、+1した数を、alertでダイアログとして表示します。

サンプル：


ちょっと工夫すれば次のように画像を出すことができます。


サイコロ画像は、イラスト素材の素材ダス様からお借りしました。

ボタンをリンクの代わりにして、
ボタンで移動させたいことってありませんか？（ありませんか・・・ね？＾＾；
まあ、ひとまずやってみますか。かなり簡単です。

<input type="button" onclick="location.href='http://ohgita.info/'" value="Masanori's WebSiteへ">

これだけ。このタグを記述するだけです。
念のため書いておきますと、http://ohgita.info/の部分が、リンク先URL。
Masanori's WebSiteへの部分が、表示する文字列です。

サンプル：

うるう年なのか否かを求めるJavaScript

<script type="text/javascript">
<!--
function Uruu(year) {
    if (year == "" || year == null) {
       
    } else if (year % 400 == 0) {
        alert(year + "年はうるう年です");
    } else if (year % 100 == 0) {
        alert(year + "年はうるう年ではありません");
    } else if (year % 4 == 0) {
        alert(year + "年はうるう年です");
    } else {
        alert(year + "年はうるう年ではありません");
    }
}
// -->
</script>

上をHTMLソースの<HEAD></HEAD>の間に挿入します。
そして、次のようなタグを好きな場所へ挿入します。

<form>
西暦：<input type="text" size="20" name="iyear" id="iyear" value="2009">年<br>
<input type="button" value="求める" onClick="Javascript:Uruu(iyear.value)">
</form>

サンプル：

西暦：年