In html, placeholder, as an attribute of input, plays a role in occupying place and prompting in the input box.
However, there are some browsers, such as Chrome, when the mouse clicks on the input box, the value of placeholder does not disappear, and only the input data disappears, which will greatly reduce the front-end user experience.
After reading a lot of masters' methods and writing long js, it was a bit difficult to see, and I thought of the stupidest method below to solve this problem.
html code:
<input type="text" placeholder="Multiple keyword spaces separated">
When the mouse clicks input, the prompt message in placeholder disappears:
<input type="text" placeholder="Multiple keyword spaces separated" onfocus="=‘‘" onblur="=‘Multiple keyword spaces separated‘">
Two ways to implement PlaceHolder
The placeholder attribute is added for input in HTML5. Provide a placeholder on input, which displays the hint of the expected value of the input field in text, which will be displayed when the input is empty.
like
<input type="text" name="loginName" placeholder="Email/Mobile phone number/QQ number">
Current browser support
However, although IE10+ supports the placeholder attribute, its performance is not consistent with other browsers
• When the mouse is clicked in IE10+ (get focus) placeholder text disappears
•Firefox/Chrome/Safari clicks do not disappear, but the text disappears when entering the keyboard
This is quite disgusting if the placeholder property is used. The product manager is still unwilling to give up and will tell you why the prompt text disappears when clicked in IE, but the prompt text disappears when entered on the keyboard in Chrome. The front-end engineer is required to change it to the same expression form. In view of this, neither of the following two implementations adopt the native placeholder attribute.
Two ways of thinking
1. (Method 1) Use input value as display text
2. (Method 2) Do not use value, add an extra tag (span) to the body and then absolutely position it to cover the input
Both methods have their own advantages and disadvantages. First, methods occupy the value attribute of input, some additional judgment work is required when submitting the form, and second, methods use additional tags.
Method one
/**
* PlaceHolder component
* $(input).placeholder({
* word:// @string prompt text
* color:// @string Text color
* evtType: // @string focus|keydown The event type that triggers placeholder
* })
*
* NOTE:
* evtType is focus by default, that is, the default text disappears when the mouse clicks on the input field, and keydown simulates the characteristics of the HTML5 placeholder attribute in Firefox/Chrome. After the cursor is positioned to the input field, the default text disappears when the keyboard enters.
* In addition, for the HTML5 placeholder attribute, the representations of IE10+ and Firefox/Chrome/Safari are not consistent, so the internal implementation does not use the native placeholder attribute.
*/
$. = function(option, callback) {
var settings = $.extend({
word: '',
color: '#ccc',
evtType: 'focus'
}, option)
function bootstrap($that) {
// some alias
var word =
var color =
var evtType =
// default
var defColor = $('color')
var defVal = $()
if (defVal == '' || defVal == word) {
$({color: color}).val(word)
} else {
$({color: defColor})
}
function switchStatus(isDef) {
if (isDef) {
$('').css({color: defColor})
} else {
$(word).css({color: color})
}
}
function asFocus() {
$(evtType, function() {
var txt = $()
if (txt == word) {
switchStatus(true)
}
}).bind('blur', function() {
var txt = $()
if (txt == '') {
switchStatus(false)
}
})
}
function asKeydown() {
$('focus', function() {
var elem = $that[0]
var val = $()
if (val == word) {
setTimeout(function() {
// Position the cursor to the first position$({index: 0})
}, 10)
}
})
}
if (evtType == 'focus') {
asFocus()
} else if (evtType == 'keydown') {
asKeydown()
}
// Handle placeholder in keydown event$(function() {
var val = $()
if (val == word) {
switchStatus(true)
}
}).keyup(function() {
var val = $()
if (val == '') {
switchStatus(false)
$({index: 0})
}
})
}
return (function() {
var $elem = $(this)
bootstrap($elem)
if ($.isFunction(callback)) callback($elem)
})
}
Method 2
$. = function(option, callback) {
var settings = $.extend({
word: '',
color: '#999',
evtType: 'focus',
zIndex: 20,
diffPaddingLeft: 3
}, option)
function bootstrap($that) {
// some alias
var word =
var color =
var evtType =
var zIndex =
var diffPaddingLeft =
// default css
var width = $()
var height = $()
var fontSize = $('font-size')
var fontFamily = $('font-family')
var paddingLeft = $('padding-left')
// process
paddingLeft = parseInt(paddingLeft, 10) + diffPaddingLeft
// redner
var $placeholder = $('<span class="placeholder">')
$({
position: 'absolute',
zIndex: '20',
color: color,
width: (width - paddingLeft) + 'px',
height: height + 'px',
fontSize: fontSize,
paddingLeft: paddingLeft + 'px',
fontFamily: fontFamily
}).text(word).hide()
// Position adjustmentmove()
// Textarea does not add line-heihgt attributeif ($('input')) {
$({
lineHeight: height + 'px'
})
}
$()
// It will only be displayed when the content is empty, for example, when the input field of the refresh page has been filled in the contentvar val = $()
if ( val == '' && $(':visible') ) {
$()
}
function hideAndFocus() {
$()
$that[0].focus()
}
function move() {
var offset = $()
var top =
var left =
$({
top: top,
left: left
})
}
function asFocus() {
$(function() {
hideAndFocus()
// The click event that cannot be triggered after covering it is covered, and you need to simulate and click it downsetTimeout(function(){
$()
}, 100)
})
// IE has some bugs, so I didn't need to add this sentence originally$(hideAndFocus)
$(function() {
var txt = $()
if (txt == '') {
$()
}
})
}
function asKeydown() {
$(function() {
$that[0].focus()
})
}
if (evtType == 'focus') {
asFocus()
} else if (evtType == 'keydown') {
asKeydown()
}
$(function() {
var txt = $()
if (txt == '') {
$()
} else {
$()
}
})
// Processing when window zooming$(window).resize(function() {
move()
})
// cache
$('el', $placeholder)
$('move', move)
}
return (function() {
var $elem = $(this)
bootstrap($elem)
if ($.isFunction(callback)) callback($elem)
})
}
Method 2 is not suitable for the following scenarios
1. Initial hiding of input
At this time, the offset of the input cannot be retrieved, and then the span cannot be located on the input.
2. The dom structure of the page containing input changes
For example, some elements are deleted or some elements are added to the page, causing the input to shift up or down, while the span is not offset at this time (span is positioned relative to body). This is rather disgusting. You can consider using span as a sibling element of input, that is, positioning relative to the inner div (rather than body). However, in this way, you must force position:relative to the outer div, which may have a certain impact on the page layout after addition.