js兼容的placeholder屬性詳解
作為一個.net后臺開發(fā)的程序猿,博客里既然大多都是前端相關的博文。是不是該考慮換方向了,轉(zhuǎn)前端開發(fā)得了 ...
小小吐槽一下,近期受該不該跳槽所困惑,我有選擇困難癥!
繼續(xù)前端,這次說一下輸入框 placeholder 這個屬性。
html5 的新屬性,就是在輸入框沒輸入值的時候,顯示的提示文字(自己的理解),例如:

貌似很好用,但也只能在支持 html 的瀏覽器版本中顯示,而對于不能支持的瀏覽器版本,讓我這種極力追求完美的開發(fā)者來說是很不舒服的一件事。
上網(wǎng)找了很多資料,有很多大牛人都已經(jīng)有了解決方案了,不過或多或少都有些缺陷,這里我做一個整合和修改:
(忘記看了多少別人的代碼了,也忘了地址是什么,在此對其他原作者說聲抱歉,若有版權問題請聯(lián)系我! -.-)
這種擴展,在我看來就像是對瀏覽器界面功能做一次美容,而我始終堅持,自然的才是最美的。所以在支持這種屬性的瀏覽器版本中,我就不多手再去做其他的修改了。
首先判斷是否已支持該屬性:
if (!('placeholder' in document.createElement('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' + 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 框架,已設定了輸入框的內(nèi)間距為 "padding: 4px 6px;" 所以這里需縮進對應的像素值。
2、GetStringNumValue() 是我們自己定義的方法,使用正則表達式,用于把字符串中的數(shù)字提取,例如 "123px" 返回 123。
3、對于 IE 中不支持的版本,propertychange 真是一個好方法,完美的結(jié)合了!...
4、擴展方法 resetplaceholder,用于使用 js 改變輸入框值時(賦值、清空),對 placeholder 進行值的對應設置。
效果:
——IE8

——IE9

相關文章
javascript實現(xiàn)任務欄消息提示的簡單實例
下面小編就為大家?guī)硪黄猨avascript實現(xiàn)任務欄消息提示的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript NodeTree導航欄(菜單項JSON類型/自制)
利用閑暇時間自己做了個JavaScript NodeTree,網(wǎng)上有很多類似的效果,本例主要是練練手,鞏固下知識,感興趣的朋友可以了解下,或許對你學習NodeTree導航欄有所幫助,認為好的就分享嘍2013-02-02
JavaScript中遍歷對象的property的3種方法介紹
這篇文章主要介紹了JavaScript中遍歷對象的property的3種方法介紹,本文先是講解了3種方法并用一張圖片加深理解,然后給出代碼實例,需要的朋友可以參考下2014-12-12
JavaScript實現(xiàn)頁面跳轉(zhuǎn)的八種方式
這篇文章介紹了JavaScript實現(xiàn)頁面跳轉(zhuǎn)的八種方式,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06

