Placeholder is another attribute added to HTML5. When input or textarea sets this attribute, the content of this value will be displayed in the text box as a gray-word prompt. When the text box gains focus, the prompt text disappears. In the past, this effect was achieved using JavaScript to control it. Firefox, Google Chrome, etc. expressed support for it, but IE does not support it.
HTML5 has made many enhancements to Web Form, such as input's new type type, Form Validation, etc.
Placeholder is another attribute added to HTML5. When input or textarea sets this attribute, the content of this value will be displayed in the text box as a gray-word prompt. When the text box gains focus, the prompt text disappears. In the past, I used JavaScript to control this effect to achieve it. Firefox, Google Chrome, etc. expressed support for it, but IE felt inconsistency!
For example: <input id=t1 type=text placeholder=Please enter text/
This introduces a super powerful attribute plug-in that supports placeholder under IE, and is also compatible with other browsers that do not support placeholder. The code is as follows:
$(document).ready(function(){ var doc=document, inputs=doc.getElementsByTagName('input'), supportPlaceholder='placeholder'in doc.createElement('input'), placeholder=function(input){ var text=input.getAttribute('placeholder'), defaultValue=input.defaultValue; if(defaultValue==''){ input.value=text } input.onfocus=function(){ if(input.value===text) { this.value='' } }; input.onblur=function(){ if(input.value===''){ this.value=text } } } }; if(!supportPlaceholder){ for(var i=0,len=inputs.length;i<len;i++){ var input=inputs[i], text=input.getAttribute('placeholder'); if(input.type==='text'&&text){ placeholder(input) } } } } });Just copy the code and save it into a js file reference, without any processing, it is super convenient!
ex: This can indeed make the IE Input display the placeholder attribute, but it is okay if there is only one input on the page. If there are multiple inputs, if the input does not fill in any value, then its empty input will automatically fill the placeholder value into the value, resulting in an error. For example:
<input type=text placeholder=Input product encoding name=goodscode id=goodscode value=123 /><input type=text placeholder=Input product name=goodsname id=goodsname value=Input product name/>
The solution is to judge it yourself in the background. Maybe it can be solved in the above js file and research it later~!