After the input is clicked, the message in placeholder disappears. inputplaceholder

Source: Internet
Author: User

After the input is clicked, the message in placeholder disappears. inputplaceholder

In html, placeholder acts as an attribute of input and plays a placeholder and prompt role in the input box.

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:

<Input type = "text" placeholder = "Separate multiple keywords with spaces">

When you click input, the message in placeholder disappears:

<Input type = "text" placeholder = "Separate multiple keywords with spaces" onfocus = "this. placeholder = ''" onblur = "this. placeholder = 'separate multiple keywords by spaces '">

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

<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 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 = $ ('<span class = "placeholder"> 'commandid placeholder.css ({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. You can consider using span as the sibling element of input, that is, Positioning Relative to the inner div (rather than the body ). However, you must add position: relative to the outer div, which may affect the page layout.

Articles you may be interested in:
  • JQuery displays or hides the code indicating that the text value is removed with the mouse focus in the form input.
  • Allow earlier browsers to support the placeholder attribute of input (js method)
  • C # how to simulate mouse operations using SendInput
  • Using jQuery to quickly solve the problem that placeholder values in input cannot be supported in ie

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.