js中怎么给placehodeler赋值

发布网友 发布时间：2022-05-07 08:35

我来回答

共1个回答

热心网友 时间：2022-04-22 23:44

var $element = $(this), placeholder = $element.attr('placeholder');

if (placeholder) {
// 文本框ID
var elementId = $element.attr('id');
if (!elementId) {
var now = new Date();
elementId = 'lbl_placeholder' + now.getSeconds() + now.getMilliseconds();
$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();
$element.on('focus blur input keyup propertychange resetplaceholder', _resetPlaceholder);

代码很简单，需注意的是：
1、label 的 margin-top / margin-left，因为我们的项目用了 bootstrap 框架，已设定了输入框的内间距为 "padding: 4px 6px;" 所以这里需缩进对应的像素值。
2、GetStringNumValue() 是我们自己定义的方法，使用正则表达式，用于把字符串中的数字提取，例如 "123px" 返回 123。
3、对于 IE 中不支持的版本，propertychange 真是一个好方法，完美的结合了！...