Shulou(Shulou.com)06/03 Report--

Editor to share with you how javascript to achieve input box content prompts and hidden functions, I believe that most people do not understand, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Sometimes the input box is small, and after you want to enter the content, there will be a prompt box with enlarged input.

Realization idea

First write a prompt box on the page, and then set the css property of the prompt box: display to none, and hide it.

Get input box element object, information prompt box element object

Bind keyboard events to input box element objects---keyup

Event handler: determine whether the input content is empty, not empty-assign the contents of the input box to the information prompt box, and set the information prompt box to display: display is set to block; is empty, the prompt box is not displayed

Add events that gain focus and lose focus.

Blur--lose focus: the mouse does not check the input box, when there is no cursor flashing in the input box, the setting information prompt box does not display: display is set to none

Focus--get focus: mouse click on the input box, when the cursor flashes in the input box, judge, if the input box has content, the information prompt box is displayed

Note that this is the keyboard release event, do not use the keyboard to press the event: keydown or keypress, the typed word has not been entered when the keyboard is released, the typed word will be entered only when the keyboard is released

Code example:

Simulate JD.com express order number query * {margin: 0; padding: 0;} input {outline-style: none;} .search {position: relative; width: 220px; margin: 100px auto } .info {display: none; position: absolute; top:-40px; left: 0; width: 170px; padding: 5px 0; font-size: 18px; line-height: 20px; border: 1px solid rgba (0,0,0,.2) Box-shadow: 0px 2px 4px rgba (0,0,0,.2);} .info:: before {content:'; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid # 000 Border-color: # fff transparent transparent; border-style: solid dashed dashed;} (* '▽') additional var expressNo = document.querySelector ('.express'); var info = document.querySelector ('.info'); expressNo.addEventListener ('keyup', function () {console.log (expressNo.value)) Console.log (this.value [XSS _ clean]); if (this.value = =') {info.style.display = 'none';} else {info.style.display =' block'; info [XSS _ clean] = this.value;}}) / / lose focus, hide box expressNo.addEventListener ('blur', function () {info.style.display =' none';}) / / get focus event, display box expressNo.addEventListener ('focus', function () {if (this.value! = ='') {info.style.display = 'block' })

Page effect:

The above is all the content of this article "how to realize the prompt and hiding function of input box content in javascript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.