placeholder is a property of html5<input>. It provides hint information (hint) that describes the expected value of the input field. This prompt is displayed when the input field is empty. High-end browsers support this property (ie10/11 text disappears when you get focus), and ie6/7/8/9 does not. In order to be compatible with major browsers and keep their presentation consistent, the following three solutions are for reference only.
Plan 1:
Abandon the original property placeholder, add a sibling span for the input, and set absolute positioning for the span (the parent node is position: relative;) so that it is above the input. The html code snippet is as follows:
<li>
<div class="inputMD" style="position: relative;">
<input class="phInput" type="text" />
<span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">Mobile phone number/email address</span> </div>
</li>
<li>
<div class="inputMD" style="position: relative;">
<input class="phInput" type="password" />
<span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">Please enter your password</span> </div>
</li>
The js code is as follows (simply written a function, but not the plug-in form, haha):
function _placeholderText(phInput, phText) { //Define the function and pass 2 parameters - the id or class of the input input box and text prompt text var $input = $(phInput);
var $text = $(phText);
$(function() { //When the page loads, iterates through all the inputs of the imitation placeholder. var _this = $(this);
var _text = _this.siblings(phText);
if($.trim(_this.val()) == '') {
_this.val("");
_text.show();
} else {
_text.hide();
}
});
$('click', function() { //Click the prompt message to input to get focus $(this).siblings(phInput).focus();
});
$('input propertychange blur', function() { //Register event for input, determine whether the value value is empty when the value value changes (actually the property changes) and when the focus is lost. var _this = $(this);
if(_this.val() == '') {
_this.siblings(phText).show();
} else {
_this.siblings(phText).hide();
}
});
}
_placeholderText('.phInput', '.phText'); //Calling the function
Personal summary: Solution 1 is suitable for login pages, but it is not suitable for background form forms and front-end search pages, because it is not very friendly to add new prompt text tags.
Plan 2:
Also discard the original property placeholder and add a property phText="Mobile Number/Email Address" to <input>. By default, the value value is prompt text and the color is gray; when <input> gets focus, if the value value is equal to the phText attribute value, the value value is empty; when <input> loses focus, if the value value is empty, the value value is prompt text. The js code is as follows:
function inputJsDIY(obj, colorTip, colorTxt) { //Define the function, pass 3 parameters - DOM object, color value of prompt text, color value of input text colorTip = colorTip || '#aaaaaa';
colorTxt = colorTxt || '#666666';
(function() {
var _this = $(this);
_this.css({"color": colorTip}); //The color of the input box is set to the color value of the prompt text by default if($.trim(_this.val()) == "") { //Judge whether the value value is empty. If it is empty, the value value assignment is equal to the prompt text _this.val(_this.attr("phText"));
} else if(_this.val() != _this.attr("phText")) {
_this.css({"color": colorTxt}); //Normal input text color value }
});
("focus", function() { // Make a judgment when getting focus var _this = $(this);
var value = _this.val();
if(value == _this.attr("phText")) {
_this.val("");
}
_this.css({"color": colorTxt});
});
("blur", function() { // Make a judgment when you lose focus var _this = $(this);
var value = _this.val();
if($.trim(value) == "") {
_this.val($(this).attr("phText")).css({"color": colorTip});
}
});
("form").on("submit", function() { //Remove the prompt text when submitting the form (empty the prompt text) (function() {
var _this = $(this);
if(_this.val() == _this.attr("phText")) {
_this.val("");
}
});
});
}
inputJsDIY($('.phInput'), '#aaa', '#666'); //Calling the function
Personal summary: Solution 2 is more suitable for background page form and front-end search page. It is simple to operate and has no additional tags. The disadvantage is that it cannot be used for password type <input>, and the prompt text disappears when the <input> gets focus (when the value is equal to the phText property value), which is different from the original placeholder property.
In addition, you can also change the phText property to the placeholder property. The supported browsers will present the original effect. The unsupported browsers use js to determine the function in scheme 2. This compromise also has its disadvantages, and the effects presented by each browser are not exactly the same.
Plan 3:
Write a method for browsers that do not support placeholder. First, assign the placeholder value to <input> and set the color to gray. Then, if the value value is equal to the placeholder value when <input> gets focus, move the cursor to the front (sum). When an input operation occurs, set the value value to empty first, and then receive the input value. In addition, for <input type="password">, you need to add a new <input type="text"> to display the prompt text. When an input operation occurs, you need to hide <input type="text">, then display <input type="password"> and let it gain focus. This solution also has some minor flaws, that is, there will be bugs when pasting with the right mouse button.
Generally speaking, several solutions have their own advantages and disadvantages. I prefer to use Scheme 1 on the login page, and the rendering effect is completely consistent, and it is not a hassle to just add a new label. The background form form and the front-end search page are more inclined to plan 2, which is simple and effective, but only when you get focus, the text will disappear.
The above is the entire content of this article, I hope you like it.