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

时间:2013-09-10 13:27:40

标签: jquery html

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

   <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('');
    });

2 个答案:

答案 0 :(得分:3)

您应该使用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");
    }
});

答案 1 :(得分:0)

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

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

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