Search

テキストボックスの入力値を取得

unknown

サンプルを見る
<script type="text/javascript">
    /**
     * [関数名] getValue
     * [機 能] 入力値を取得
     * [説 明] 指定されたエレメント名の入力値を取得する
     * [引 数] @param elm_name string エレメント名
    */
    function getValue(elm_name){
        var frm = document.form1;
        if(frm.elements[elm_name].value != ""){
            alert(frm.elements[elm_name].value);
        }else{
            alert("何も入力されていません");
        }
    }
</script>

<form name="form1" action="#">
    <input type="text" name="box" />
    <input type="button" value="テキストボックスの値を取得" onclick="getValue('box')" /><br>
</form>

maxlength数文字が入力されたら次のエレメントへフォーカス移動

unknown

テキストボックスの maxlength属性(入力最大文字数の指定)に指定した値は、maxLengthで取得することが可能です。 maxlength属性を指定していない場合は、デフォルト値(2147483647)を取得します。

以下の例は、郵便番号の入力フォームです。 Tabキーを押さなくても、1桁入力するたびにフォーカスが次のテキストボックスに移動します。

サンプルを見る
<script type="text/javascript">
    function nextFocus(elm, max) {
        /* 次のエレメント番号 */
        var next_elm = eval(elm+1);
        if (document.form2.elements[elm].value.length >= max) {
            document.form2.elements[next_elm].focus();
        }
    }
</script>

<form name="form2" action="#">〒
    <input type="text" name="t1" onkeyup="nextFocus(0,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t2" onkeyup="nextFocus(1,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t3" onkeyup="nextFocus(2,maxLength)" maxlength="1" size="1" />
     - 
    <input type="text" name="t4" onkeyup="nextFocus(3,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t5" onkeyup="nextFocus(4,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t6" onkeyup="nextFocus(5,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t7" maxlength="1" size="1" />
</form>
-

任意のコントロールにフォーカス移動&選択

unknown

サンプルを見る
<script type="text/javascript">
    function FocusOn(elm){
        /* 入力欄にフォーカスを移動 */
        document.form3.elements[elm].focus();
        document.form3.elements[elm].select();
    }
</script>

<form name="form3" action="#">
    <p>名前: <input type="text" name="name" /></p>
    <p>年齢: <input type="text" name="age" /></p>
    <p>
        <input type='button' value="名前にFocus" onclick="FocusOn(0)" />
        <input type='button' value="年齢にFocus" onclick="FocusOn(1)" />
    </p>
</form>

名前: 

年齢: 

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women