1

わかりました。jQueryMobileフレームワークを使用していますが、テキストまたはテキスト領域のデフォルト値をヘルパーテキストとして使用できるようにしたいと思います。ただし、フォーカスを合わせると、テキストがクリアされ、新しく入力された値が保持されます。また、値を再度クリアしないように、再度フォーカスします（誤って再度タッチしたと言います）。

私はこれらを含めています

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

例が機能していません

これをページ自体に追加する:(例へのリンク）

<script type="text/javascript">
    $('.default-value').each(function() {
        var default_value = this.value;
        $(this).focus(function() {
            if(this.value == default_value) {
                this.value = '';
            }
        });
        $(this).blur(function() {
            if(this.value == '') {
                this.value = default_value;
            }
        });
    });
</script>

これがHTMLです（フォームタグにもあります）

<!-- Address 2 -->
<div data-role="fieldcontain">
    <label for="address-2">Address 2</label>
    <input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #"  />
</div>
4

3 に答える 3

9

将来の世代のために: HTML5 にはプレースホルダーと呼ばれるものがあります

<input type="text" name="address-2" placeholder="Apt #, Suite #, Floor #"  />

プレースホルダーは現在、最新の Webkit ベースのブラウザーでサポートされています。

于 2011-02-15T08:27:28.080 に答える
3

jQuery 1.5 と jQuery Mobile 1.0a3 を使用してコードを動作させることができました。jQuery Mobile だけでなく jQuery も含めましたか? jQuery Mobile が機能するには、jQuery のバージョンが必要です。

編集：これはiPhoneシミュレーターでのみテストしたものであり、実際のデバイスではテストしていないことに注意してください。シミュレーターは iOS 4.0.1 を実行していました。

<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js" type="text/javascript"></script></head>

<div data-role="fieldcontain">
    <label for="address-2">Address 2</label>
    <input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #"  />
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.default-value').each(function() {
            var default_value = this.value;
            $(this).focus(function() {
                if(this.value == default_value) {
                    this.value = '';
                }
            });
            $(this).blur(function() {
                if(this.value == '') {
                    this.value = default_value;
                }
            });
        });
    });
</script>
于 2011-02-14T17:35:30.070 に答える
0

HTML5 の入力プレースホルダー属性に加えて、記述したヘルパー テキストとまったく同じように動作します。jQuery Mobile では、「ui-hidden-accessible」クラスの label フィールドを使用することを推奨しています。

アクセシビリティのために、jQuery Mobile では、すべてのフォーム要素を意味のあるラベルと組み合わせる必要があります。

http://jquerymobile.com/demos/1.1.0/docs/forms/docs-forms.html

次に、Modernizr を使用してプレースホルダー属性のサポートを検出し、サポートされていない場合は、ポリフィル (このようなもの) を使用するか、ラベルを表示する ui-hidden-accessible クラスを削除します。

if(!Modernizr.input.placeholder){
$('label.ui-hidden-accessible')
    .removeClass('ui-hidden-accessible')
    .addClass('ui-accessible');
}

次に、必要に応じて新しいラベルのスタイルを設定します。入力フィールドが type="password" の場合、ポリフィル アプローチがうまく機能しないことがわかったので、その場合はラベルを再表示することをお勧めします。

于 2012-07-04T08:53:29.407 に答える