Home > Article > Web Front-end > [Help] Implementation of a gorgeous effect on the message interface_html/css_WEB-ITnose
[Help] Implementation of a gorgeous effect on the message interface_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:16:131041browse
Let me give you a case: http://www.ruiec.com/message/
This is how he achieved the effect of his message on this page!
1/The border will glow after the mouse is clicked in.
2/The text in the border will automatically disappear after you type!
How to achieve these two effects!
Reply to discussion (solution)
This is very simple, js event, such as obj.focus() ｛｝
Border glow effect It can be implemented using css3 pseudo-classes, just search for details
The second one is JQuery:
$("#input_text").bind("click",function()
{
$(this).val("");
});//
What effect, can’t be seen. Incompatible.
Sometimes, border highlighting is a problem when browsing The effect provided by the processor.
The text disappears by making the original content equal to "" in the keyboard input event onkeydown.
When onkeydown, first check whether the text box content is the original preset content. If so Just make it empty. If not, don't process it.
Monitoring keystrokes is slightly less efficient. The way to improve efficiency is to do the above in the onfocus event of the text box.
Chapter One is implemented using pseudo classes, and the second one is implemented for you. The code is as follows
<!DOCTYPE html> <head> <style> </style> <script> function cleartext() { var inputtext=document.getElementById("inputtext"); if(inputtext.value=="请输入姓名") { inputtext.value=""; inputtext.style.color="black"; } } </script> <body><body><input type="text" id="inputtext" style="font-weight:100; color:#999999; border:1px solid black" value="请输入姓名" onFocus="cleartext();"/><input type="text" /></body> </body></html>
<style type="text/css"> .input_on{ width:185px;padding:4px 8px 0pt 3px;height:20px;border:1px solid #999;background-color:#FFFFCC;} .input_out{width:185px;padding:4px 8px 0pt 3px;height:20px;border:1px solid #CCC;background-color:#FFF;} </style><input type="text" value="" onfocus="$(this).removeClass('input_out');$(this).addClass('input_on');" onblur="$(this).removeClass('input_on');$(this).addClass('input_out');" onmousemove="$(this).removeClass('input_out');$(this).addClass('input_on');" onmouseout="$(this).removeClass('input_on');$(this).addClass('input_out');" /> plus LZ’s onfocus event
ls The onfocus event was typed incorrectly
The first one uses css style, input.focus
The second one is the input attribute placeholder
The second one is the feature of HMLT5