Message disappears in placeholder after clicking input _ javascript tips

The placeholder attribute is added for input in HTML5. A placeholder is provided on input to display the prompt information (hint) of the expected value of the input field in text format. This field is displayed in html when the input is empty, and placeholder is used as an attribute of input, it serves as a placeholder in the input box and prompts.

However, some browsers, such as chrome, do not disappear when the mouse clicks the input box, and only the input data disappears, which will greatly compromise the front-end user experience.

After reading a lot of great methods and writing a long js code, I thought of the most silly method below to solve this problem.

Html code:

When you click input, the message in placeholder disappears:

Two PlaceHolder implementation methods

The placeholder attribute is added for input in HTML5. A placeholder is provided on input to display the hint of the expected value of the input field in text format. This field is displayed when the input is empty.

For example

Current browser support

However, although IE10 + supports the placeholder attribute, its performance is inconsistent with that of other browsers.
• The placeholder text disappears when you click (get focus) in IE10 +.
• Firefox/Chrome/Safari click does not disappear, but the text disappears when the keyboard is entered

This is quite disgusting if the placeholder attribute is used. The product manager is still reluctant to say why the text disappears when I click in IE, while the text disappears when I input the keyboard in Chrome. Front-end engineers are required to change to the same form. In view of this, the following two methods do not use the native placeholder attribute.

Two ways of thinking

1. (Method 1) use the input value as the display text

2. (Method 2) if no value is used, add an additional tag (span) to the body and then absolutely overwrite the input.

Each of the two methods has its own advantages and disadvantages. Method 1 occupies the value attribute of input, and requires additional judgment when submitting a form. Method 2 uses additional labels.

Method 1

/*** PlaceHolder component ** $ (input ). placeholder ({* word: // @ string prompt text * color: // @ string text color * evtType: // @ string focus | keydown triggers the event type of placeholder *}) ** NOTE: * The default evtType is focus, that is, when the mouse clicks the input field, the default text disappears, and keydown simulates the features of the HTML5 placeholder attribute in Firefox/Chrome, the default text disappears only when the cursor locates the input field and the keyboard inputs. * In addition, for the HTML5 placeholder attribute, IE10 + and Firefox/Chrome/Safari are also different in forms. Therefore, the native placeholder attribute is not used for internal implementation */$. fn. placeholder = function (option, callback) {var settings = $. extend ({word: '', color: '# ccc', evtType: 'Focal '}, option) function bootstrap ($ that) {// some alias var word = settings. wordvar color = settings. colorvar evtType = settings. evtType // defaultvar defColor = effecthat.css ('color') var defVal = $ that. val () if (defVal = ''| defVal = word) then define that.css ({color: color }). val (word)} else effectingthat.css ({color: defColor})} function switchStatus (isDef) {if (isDef) evaluate ({color: defColor})} else effectingthat.val(word=.css ({color: color})} function asFocus () {$ that. bind (evtType, function () {var txt = $ that. val () if (txt = word) {switchStatus (true )}}). bind ('blur', function () {var txt = $ that. val () if (txt = '') {switchStatus (false)} function asKeydown () {$ that. bind ('focal ', function () {var elem = $ that [0] var val = $ that. val () if (val = word) {setTimeout (function () {// position the cursor to the first place $ that. setCursorPosition ({index: 0}) }, 10) }}if (evtType = 'text') {asFocus ()} else if (evtType = 'keydetail ') {asKeydown ()} // process placeholder $ that in the keydown event. keydown (function () {var val = $ that. val () if (val = word) {switchStatus (true )}}). keyup (function () {var val = $ that. val () if (val = '') {switchStatus (false) $ that. setCursorPosition ({index: 0})} return this. each (function () {var $ elem = $ (this) bootstrap ($ elem) if ($. isFunction (callback) callback ($ elem )})}

Method 2

$. Fn. placeholder = function (option, callback) {var settings = $. extend ({word: '', color: '#999', evtType: 'Focal ', zIndex: 20, diffPaddingLeft: 3}, option) function bootstrap ($ that) {// some alias var word = settings. wordvar color = settings. colorvar evtType = settings. evtTypevar zIndex = settings. zIndexvar diffPaddingLeft = settings. diffPaddingLeft // default cssvar width = $ that. outerWidth () var height = $ that. outerHeight () var fontSize = $that.css ('font-size') var fontFamily = $that.css ('font-family ') var paddingLeft = $that.css ('padding-left ') // processpaddingLeft = parseInt (paddingLeft, 10) + diffPaddingLeft // redner var $ placeholder = partition ({position: 'Absolute ', zIndex: '20', color: color, width: (width-paddingLeft) + 'px ', height: height + 'px', fontSize: fontSize, paddingLeft: paddingLeft + 'px ', fontFamily: fontFamily }). text (word ). hide () // adjust the position move () // textarea does not add the line-heihgt attribute if ($ that. is ('input') has been placeholder.css ({lineHeight: height + 'px '})} $ placeholder. appendTo (document. body) // it is displayed only when the content is empty. for example, when the input field of the refresh page has been filled in with the content, var val = $ that. val () if (val = ''& $ that. is (': visible') {$ placeholder. show ()} function hideAndFocus () {$ placeholder. hide () $ that [0]. focus ()} function move () {var offset = $ that. offset () var top = offset. topvar left = offset.left?placeholder.css ({top: top, left: left})} function asFocus () {$ placeholder. click (function () {hideAndFocus () // The click event of input cannot be triggered after it is covered. you need to simulate the setTimeout (function () {$ that. click ()}, 100)}) // There are some bugs in IE. you didn't need to add this sentence $ that. click (hideAndFocus) $ that. blur (function () {var txt = $ that. val () if (txt = '') {$ placeholder. show () }}function asKeydown () {$ placeholder. click (function () {$ that [0]. focus ()} if (evtType = 'core') {asFocus ()} else if (evtType = 'keydetail') {asKeydown ()} $ that. keyup (function () {var txt = $ that. val () if (txt = '') {$ placeholder. show ()} else {$ placeholder. hide () }}) // process $ (window) when the window is scaled ). resize (function () {move ()}) // cache $ that. data ('EL ', $ placeholder) $ that. data ('move ', move)} return this. each (function () {var $ elem = $ (this) bootstrap ($ elem) if ($. isFunction (callback) callback ($ elem )})}

Method 2 is not suitable for the following scenarios

1. input initial hiding

In this case, the offset of the input cannot be obtained, and the span to the input cannot be located.

2. the dom structure of the page containing input changes.

For example, if some elements are deleted or some elements are added to the page, the input is offset up or down. in this case, the span is not offset (the span is located relative to the body ). This is quite disgusting. we can consider using span as the sibling element of input, that is, positioning relative to the inner p (rather than the body ). In this case, the position: relative must be added to the outer p, which may affect the page layout.