Question

我在输入中有一个带有文本提示的表单。我知道如何删除焦点上的文字，但是如果有人点击它而没有输入任何内容，我该如何添加呢？

   <form class="grid"> 
        <section>
            <label id="top">Create New Contact</label>
        </section>
        <section>
            <span class="field"><input type="input" class="regular" id="firtName" value="First Name"></input></span>
        </section>
        <section>
            <span class="field"><input type="input" class="regular" value="Last Name"></input></span>
        </section>
         <section>
            <span class="field"><input type="input" class="regular" value="Salutation"></input></span>
        </section>
        <section>
            <span class="field"><input type="input" class="regular" value="Title"></input></span>
        </section>
        <section>
            <span class="field"><input type="input" class="regular" value="Department"></input></span>
        </section>
        <section>
            <span class="field"><input type="input" class="regular" value="Accountant"></input></span>
        </section>
        <section>
            <div id="lineDiv"></div>
        </section>
        <section>
            <a href="#" class="cancel" data-role="button" data-inline="true" data-mini="true">Cancel</a>

            <a href="#" id="save" data-role="button" data-inline="true"  data-mini="true">Save</a>
        </section>
    </form>

    jQuery('input').focus(function() {
       jQuery(this).val('');
    });

Answer 1

您应该使用placeholder

<input type="text" placeholder="Im holding its place!" />

但是如果你不能使用HTML5，请使用jQuery的.blur()来处理焦点。

jQuery('input').focus(function() {
   jQuery(this).val('');
}).blur(function() {
    if (this.value == '') {
        jQuery(this).val("Nothing entered, back to placeholdering");
    }
});

Answer 2

如果您不想自己烹饪或使用（荒谬的）html5功能，那么有很多占位符插件。

最简单的手动方式是绑定.focus和.blur个事件，在每个输入上交换placeholder属性和_placeholder属性。简单而有效。

注意：如果您根本不想使用html5 placeholder，我建议您不要手动操作，因为这意味着您需要使用不同的字体来使其表现出色恰到好处 - 它的参与程度更高，而且通常不值得花时间。

删除和添加文本提示到输入字段

2 个答案: