js兼容的placeholder属性详解
作为⼀个后台开发的程序猿，博客⾥既然⼤多都是前端相关的博⽂。是不是该考虑换⽅向了，转前端开发得了 ...
⼩⼩吐槽⼀下，近期受该不该跳槽所困惑，我有选择困难症！
继续前端，这次说⼀下输⼊框 placeholder 这个属性。
html5 的新属性，就是在输⼊框没输⼊值的时候，显⽰的提⽰⽂字（⾃⼰的理解），例如：
貌似很好⽤，但也只能在⽀持 html 的浏览器版本中显⽰，⽽对于不能⽀持的浏览器版本，让我这种极⼒追求完美的开发者来说是很不舒服的⼀件事。
上⽹了很多资料，有很多⼤⽜⼈都已经有了解决⽅案了，不过或多或少都有些缺陷，这⾥我做⼀个整合和修改：
input标签placeholder属性（忘记看了多少别⼈的代码了，也忘了地址是什么，在此对其他原作者说声抱歉，若有版权问题请联系我！ -.-）
这种扩展，在我看来就像是对浏览器界⾯功能做⼀次美容，⽽我始终坚持，⾃然的才是最美的。所以在⽀持这种属性的浏览器版本中，我就不多⼿再去做其他的修改了。
⾸先判断是否已⽀持该属性：
复制代码代码如下:
if (!('placeholder' ateElement('input'))) { }
如果不⽀持，⼯作来了。
取出所有拥有 placeholder 属性的 input:text / input:password / textarea，取出各⾃的 placeholder 属性值，然后模仿功能，在每⼀个标签后加⼀个 label 标签，⽤来显⽰ placeholder 的值，当输⼊值时，清空显⽰的字符串，当删除输⼊值时，显⽰字符串。
复制代码代码如下:
var $element = $(this), placeholder = $element.attr('placeholder');
if (placeholder) {
/
/ ⽂本框ID
var elementId = $element.attr('id');
if (!elementId) {
var now = new Date();
elementId = 'lbl_placeholder' + Seconds() + Milliseconds();
$element.attr('id', elementId);
}
// 添加label标签，⽤于显⽰placeholder的值
var $label = $('<label>', {
html: $element.val() ? '' : placeholder,
'for': elementId,
css:
{
position: 'absolute',
cursor: 'text',
color: '#a9a9a9',
fontSize: $element.css('fontSize'),
fontFamily: $element.css('fontFamily')
}
}).insertAfter($element);
// 绑定事件
var _setPosition = function () {
$label.css({ marginTop: GetStringNumValue($element.css('marginTop')) + 8 + 'px', marginLeft: '-' + (GetStringNumValue($element.css('width')) - 6) + 'px' });
}
var _resetPlaceholder = function () {
if ($element.val()) { $label.html(null); }
else {
_setPosition();
$label.html(placeholder);
}
}
_setPosition();
$('focus blur input keyup propertychange resetplaceholder', _resetPlaceholder);
代码很简单，需注意的是：
1、label 的 margin-top / margin-left，因为我们的项⽬⽤了 bootstrap 框架，已设定了输⼊框的内间距为 "padding: 4px 6px;" 所以这⾥需缩进对应的像素值。
2、GetStringNumValue() 是我们⾃⼰定义的⽅法，使⽤正则表达式，⽤于把字符串中的数字提取，例如 "123px" 返回 123。
3、对于 IE 中不⽀持的版本，propertychange 真是⼀个好⽅法，完美的结合了！...
4、扩展⽅法 resetplaceholder，⽤于使⽤ js 改变输⼊框值时（赋值、清空），对 placeholder 进⾏值的对应设置。
效果：
——IE8
—
—IE9

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。