Input clicks after the placeholder message disappears _javascript tips

HTML, placeholder as an attribute of input, plays a role in the input box and prompts.

But there are some browsers, such as Chrome, when the mouse clicks the input box, the placeholder value does not disappear, only the input data disappears, will make the front-end user experience greatly compromised.

See a lot of great God's method, wrote a long JS, looking a little labored, think of the following the most stupid way to solve this problem.

HTML code:

When the mouse clicks on the input, the message in the placeholder disappears:

<input type= "text" placeholder= "multiple keyword spaces separated" onfocus= "this.placeholder=" "onblur=" this.placeholder= ' multiple keyword spaces separated ' " >

Two ways to realize placeholder

The placeholder property is added to input in HTML5. Provides a placeholder on input that displays the prompt information for the expected value of the input field (hint), which is displayed when the input is empty.

Such as

Current browser support

However, although ie10+ supports the placeholder property, its performance is inconsistent with other browsers
ie10+ when mouse clicks (get focus) placeholder text disappears
Firefox/chrome/safari Click Not to disappear, but keyboard input when text disappears

This is rather disgusting if the placeholder property is used. Product Manager or not, will say why IE is clicked when prompted text disappears, chrome is keyboard input when the text disappears. Require the front-end engineer to change to the same form of presentation. In view of this, the following two implementations do not adopt the native placeholder attribute.

Two ways of thinking

1. (Mode i) using the value of input as the display text

2. (Mode II) do not use value, add an extra label (span) to the body and then absolute positioning to cover the input above

Each has its own advantages and disadvantages, the way one occupies the value of input, the form submission requires some extra work to do, the way two use the additional tags.

Way One

/** * Placeholder Component * $ (input). placeholder ({* Word://@string Hint text * color://@string text color * Evttype://@string Focus |keydown Trigger Placeholder Event Type *}) * * NOTE: * Evttype default is focus, that is, mouse clicks to the input field when the default text disappears, KeyDown simulate HTML5 placeholder properties in firefox/
Features in Chrome, the default text disappears when the cursor is positioned on the input field and the keyboard is entered. * In addition, for HTML5 placeholder attributes, ie10+ and Firefox/chrome/safari manifestations are inconsistent, so the internal implementation does not adopt the native placeholder attribute/$.fn.placeholder = function (option, callback) {var settings = $.extend ({word: ', color: ' #ccc ', Evttype: ' Focus '}, option) function boots 
Trap ($that) {//some alias var word = settings.word var color = settings.color var Evttype = settings.evttype//default var defcolor = $that. CSS (' color ') var defval = $that. val () if (Defval = = ' | | | defval = = Word) {$that. css ({color:color} . val (Word)} else {$that. css ({color:defcolor})} function Switchstatus (ISDEF) {if (ISDEF) {$that. val (")". CSS ({color:  Defcolor})} else {$that. 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 = = ") {switch Status (FALSE)}} function Askeydown () {$that. bind (' Focus ', function () {var elem = $that [0] var val = $that. Val () (val = = Word) {settimeout (function () {//cursor positioned to first $that. Setcursorposition ({index:0})}}})} if (Evttype = = ' Focus ') {Asfocus ( )} else if (Evttype = = ' KeyDown ') {Askeydown ()}//KeyDown event handles placeholder $that. KeyDown (function () {var val = $that. V Al () if (val = = Word) {Switchstatus (True)}). KeyUp (function () {var val = $that. val () if (val = =) {Switchstatus (FAL SE) $that. setcursorposition ({index:0})})} return This.each (function () {var $elem = $ (this) bootstrap ($elem) if ($.is Function (callback)) callback ($elem)})}

mode two

$.fn.placeholder = function (option, callback) {var settings = $.extend ({word: ', color: ' #999 ', Evttype: ' Focus ', zind Ex:20, diffpaddingleft:3}, option) function bootstrap ($that) {//some alias var word = settings.word var color = Sett Ings.color var evttype = settings.evttype var zindex = settings.zindex var diffpaddingleft = settings.diffpaddingleft//D Efault css var width = $that. Outerwidth () var height = $that. Outerheight () var fontsize = $that. css (' font-size ') var fontf amily = $that. css (' font-family ') var paddingleft = $that. css (' padding-left ')//Process paddingleft = parseint (paddinglef T/a) + Diffpaddingleft//redner var $placeholder = $ (' <span class= ' placeholder ' > ') $placeholder. css ({position: ' Absolute ', ZIndex: ', Color:color, Width: (width-paddingleft) + ' px ', height:height + ' px ', Fontsize:fontsize, PA Ddingleft:paddingleft + ' px ', fontfamily:fontfamily}). Text (Word). Hide ()//Position adjustment Move ()//TEXTAREA without LINE-HEIHGT property if ($that. Is (' input ')) {$PLAceholder.css ({lineheight:height + ' px '})} $placeholder. Appendto (document.body)//content is empty, such as the Refresh page input field is already filled in the content when Var val = $that. val () if (val = = ' && $that. Is (': Visible ')} {$placeholder. Show ()} function Hideandfocus () {$placeho Lder.hide () $that [0].focus ()} function Move () {var offset = $that. Offset () var top = offset.top var left = Offset.left $ Placeholder.css ({top:top, left:left})} function Asfocus () {$placeholder. Click (function () {Hideandfocus ()//cover cannot be triggered Input Click event, you need to simulate the click of the settimeout (function () {$that. Click ()},)})//IE there are some bugs, it is not necessary to add this sentence $that. Click (hideandfocus) $ That.blur (function () {var txt = $that. val () if (txt = ") {$placeholder. Show ()}})} function Askeydown () {$placehold Er.click (function () {$that [0].focus ()})} if (Evttype = = ' Focus ') {Asfocus ()} else if (Evttype = ' KeyDown ') {Askeydo
WN ()} $that. KeyUp (function () {var txt = $that. val () if (txt = =) {$placeholder. Show ()} else {$placeholder. Hide ()} //Window Zoom processing $ (window). Resize (function () {move ()})//cache $that. Data (' El ', $placeholder) $that. Data ("Move", Move)} return This.each (function () {VA R $elem = $ (this) bootstrap ($elem) if ($.isfunction (callback)) callback ($elem)})}

Mode 2 is not suitable for the following scenarios

1. Input Initial Hide

The offset of input cannot be taken at this time, and can not locate span to input.

2. The page DOM structure that contains input changes

For example, some elements are deleted from the page or some elements are added, which causes input to shift up or down, while span is not offset (span relative body positioning). This is more disgusting, you can consider the span as the input of the sibling element, that is, relative to the inner div positioning (rather than body). However, you must force the position:relative to be added to the outer Div, which may have an effect on the layout of the page.