Reprinted from the product is slightly net: http://www.pinlue.com/article/2020/03/0710/059990493435.html
html5 placeholder is newly added attribute is provided a primary tips (hint), it is used to describe the expected value of the input field. The prompt will be empty when displayed in the input field and disappears when the field gets the focus. placeholder property for the following input type: text, search, url, telephone, email and password.
We look at the effect of the Google browser, as shown:
Has the focus:
Input field:
Because the property is html5, low natural version of the browser, such as ie6-8 incompatible. Here are just at how to display the above results in a low version of the browser, the word does not say directly on the code.
html：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>基于 jquery 实现 ie 浏览器兼容 placeholder 效果</title> <style> *{margin:0;padding:0;} .txt{position:relative;font-size:12px;margin:10px;} .txt input{border:1px solid #ccc;height:30px;line-height:30px;padding:0 10px;width:200px;} .txt .txt-tip{color:#999;position:absolute;left:10px;top:0;height:32px;line-height:34px;} </style></head><body> <div class="txt"> <input type="text" value=""/> </div></body></html><script src="js/jquery.min.js"></script><script src="js/placeholder.js"></script><script>$(function(){ var $input = $(".txt input"); initPlaceholder($input, "请输入内容", "txt-tip");});</script>
placeholder.js：
function initPlaceholder($input, msg, classname){ var isIE = !!window.ActiveXObject || "ActiveXObject" in window; var isPlaceholder = "placeholder" in document.createElement("input"); if(isPlaceholder && !isIE){ $input.attr("placeholder", msg); }else{ var $tip = $("<span></span>"); $input.removeAttr("placeholder"); if($input.is(":hidden")){ $tip.hide(); } $tip.addClass(classname).text(msg); $input.after($tip); $.data($input[0], "tip", $tip); if($input.val() != ""){ hidePHTip($input); } dealPHTip($input, $tip); }}function hidePHTip($input){ var $tip = $.data($input[0], "tip"); if($tip){ $tip.hide(); }}function dealPHTip($input, $tip){ var _deal = function(){ var val = $input.val(); if(val == ""){ $tip.show(); }else{ $tip.hide(); } }; $tip.click(function(){ $input.focus(); }); $input.on("input propertychange", function(){ clearTimeout(timeout); var timeout = setTimeout(_deal, 0); });}
The principle: firstly filtered under a browser, non-ie browser and support the placeholder attribute on a placeholder, ie a browser is a span instead of placeholder text, the style is positioned input above, while monitoring changes in input the input block value to determine display or hide the span.
We look at the effect ie6 browser:
Has the focus:
Input field:
And you can see the effect of Google's browser is the same, the only downside is that the text is not centered, can be modified by css.
