实现placeholder效果的方案汇总

网友投稿 206 2023-08-01


实现placeholder效果的方案汇总

placeholder是html5的一个属性,它提供可描述输入字段预期值的提示信息(hint), 该提示会在输入字段为空时显示。高端浏览器支持此属性(ie10/11在获得焦点时文字消失),ie6/7/8/9则不支持。为了兼容各主流浏览器并使其呈现效果保持一致,以下三套方案仅供参考。

方案一:

摒弃原始属性placeholder,为input添加一个兄弟节点span,并为span设置绝对定位(父节点为position: relative;),使其位于input之上。html代码片段如下:

手机号码/邮箱地址

请输入密码

js代码如下(简单写了个函数,没写插件形式,呵呵):

function _placeholderText(phInput, phText) { //定义函数,传递2个参数——input输入框和text提示文本的id或者class

var $input = $(phInput);

var $text = $(phText);

$input.each(function() { //页面加载时遍历所有仿placeholder的input

var _this = $(this);

var _text = _this.siblings(phText);

if($.trim(_this.val()) == '') {

_this.val("");

_text.show();

} else {

_text.hide();

}

});

$text.on('click', function() { //点击提示信息,input获取焦点

$(this).siblings(phInput).focus();

});

$input.on('input propertychange blur', function() { //为input注册事件,value值改变(其实是属性发生变化)时以及失去焦点时判断value值是否为空

var _this = $(this);

if(_this.val() == '') {

_this.siblings(phText).show();

} else {

_this.siblings(phText).hide();

}

});

}

_placeholderText('.phInput', '.phText'); //调用函数

个人总结:方案一适用于登录页面,但对于后台form表单及前台的搜索页面不太适合,因为要增加新的提示文本标签,不太友好。

方案二:

同样摒弃原始属性placeholder,为添加一个属性phText="手机号码/邮箱地址"。默认状态下,value值为提示文本并且颜色为灰色;获得焦点时,若value值等于phText属性值,则value值置空;失去焦点时,若value值为空,则value值为提示文本。js代码如下:

function inputJsDIY(obj, colorTip, colorTxt) { //定义函数,传递3个参数——DOM对象、提示文本的颜色值、输入文本的颜色值

colorTip = colorTip || '#aaaaaa';

colorTxt = colorTxt || '#666666';

obj.each(function() {

var _this = $(this);

_this.css({"color": colorTip}); //输入框颜色默认置为提示文本的颜色值

if($.trim(_this.val()) == "") { //判断value值是否为空,若为空则value值赋值等于提示文本

_this.val(_this.attr("phText"));

} else if(_this.val() != _this.attr("phText")) {

_this.css({"color": colorTxt}); //正常的输入文本颜色值

}

});

obj.on("focus", function() { //获取焦点时做判断

var _this = $(this);

var value = _this.val();

if(value == _this.attr("phText")) {

_this.val("");

}

_this.css({"color": colorTxt});

});

obj.on("blur", function() { //失去焦点时做判断

var _this = $(this);

var value = _this.val();

if($.trim(value) == "") {

_this.val($(this).attr("phText")).css({"color": colorTip});

}

});

obj.parents("form").on("submit", function() { //提交表单时去除提示文本(把提示文本置空)

obj.each(function() {

var _this = $(this);

if(_this.val() == _this.attr("phText")) {

_this.val("");

}

});

});

}

inputJsDIY($('.phInput'), '#aaa', '#666'); //调用函数

个人总结:方案二比较适合后台页面form表单及前台搜索页面,操作简单,无附加标签。缺点是不能用于password类型的,而且获得焦点时的提示文本消失(value值等于phText属性值时),这一点与原始的placeholder属性不同。

另外,也可以把phText属性改为placeholder属性,支持的浏览器呈现原始效果,不支持的浏览器通过js判断{'placeholder' in document.createElement('input')}调用方案二中的函数。此折中方案也有其缺点,各浏览器呈现的效果不完全一样。

方案三:

为不支持placeholder的浏览器写一个方法,首先把placeholder值赋给并且颜色置为灰色,然后获得焦点时判断value值等于placeholder值的话,把光标移至最前面(this.createTextRange和this.setSelectionRange)。当发生输入操作时,先把value值置为空,然后再接收输入值。另外,对于要为其新增一个用来显示提示文本,当发生输入操作时,需要把隐藏,然后把显示出来并让其获得焦点。此方案也有一些小缺陷,那就是当用鼠标右键粘贴时会出现bug。

总体上来讲,几种方案各有优缺点。登录页面我更倾向于使用方案一,呈现效果完全一致,仅仅是BpeRNEA增加个新标签也不算麻烦。后台form表单和前台搜索页面更倾向于方案二,简单有效,只是在获得焦点时提示文本消失。

以上所述就是本文的全部内容了,希望大家能够喜欢。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:无刷新上传文件并返回自定义值
下一篇:java基础之Object类
相关文章

 发表评论

暂时没有评论,来抢沙发吧~