0

我有一个表单，其中包含一些具有初始值的输入。我希望当有人单击某些输入并单击默认值时会返回。如果他点击它并输入一些东西，如果他再次点击它，它不会试图删除他输入的内容。

这是我尝试过的代码：

<input type="text" name="prenom" value="Prénom" onfocus="this.value = this.value=='Prénom'?'':this.value;" onblur="this.value = this.value==''?'Prénom':this.value;"/>

没有其他方法可以做到这一点，因为这段代码很长。

4

4 回答 4

3

如果您不担心较旧的浏览器，可以使用以下方法：

<input type="text" name="prenom" placeholder="Prénom"/>
于 2013-05-13T20:25:32.027 回答
2

使用占位符

<input type="text" name="prenom" placeholder="Prénom"/>

见支持

您也可以将样式应用于占位符文本：-

::-webkit-input-placeholder {
   color: #000000;
}

:-moz-placeholder { /* Firefox 18- */
   color:  #000000;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color:  #000000;  
}

:-ms-input-placeholder {  
   color:  #000000; 
}

演示

在旧浏览器中有许多可用于占位符支持的 plyfill，您可以查看它们。这是关于它的SO帖子。

于 2013-05-13T20:26:00.780 回答
2

如果您担心旧版浏览器，请尝试以下代码：

HTML

<input id="user" type="text" placeholder="someone@example.com" /><br />
<input type="password" placeholder="Password" />

JS

(function($){
var placeholderIsSupported = ('placeholder' in document.createElement('input'));
$.fn.emulatePlaceholder = function(){
if(!placeholderIsSupported){
    this.each(function(index, element){
        var handle = $(element);
        var placeholder = handle.attr('placeholder');           
        if(handle.val() == ''){
            handle.val(placeholder);    
        }
        handle.blur(function(e){
            var handle = $(this);
            if(handle.val() == ''){
                handle.val(placeholder);
            }
        });
        handle.focus(function(e){
            var handle = $(this);
            if(handle.val() == placeholder){
                handle.val('');
            }
        });
    });
}
};
})(jQuery);

用法

$('input').emulatePlaceholder();

jsFiddle 示例。

测试上面的小提琴IE<8以查看实际工作的代码

于 2013-05-13T20:30:14.467 回答
1

你可以使用标签输入的属性占位符

于 2013-05-13T20:27:17.820 回答