Input label input box with prompt text method

This article mainly introduces the input tag to implement the input box with prompt text effect (two methods). Friends who need it can refer to it. I hope it can help everyone.

Method 1: HTML5 cooperates with CSS3 to implement an input box with prompt text (get rid of js);

A CSS unique to webkit, which can control the text style inside and cooperate with the animation of CSS3 Effects and pseudo-classes, we can easily make an animated input box, which is very suitable for system login, search, etc. If you are interested, you can refer to this article, which may help you. Webkit is used as a carrier to develop the system. Of course It is necessary to use Html5 and CSS3 extensively, which not only reduces a large amount of JS but also ensures smoother flow.

When the dialog box is selected, the prompt text becomes lighter and disappears after input. The common practice now is to add a Label after the Input label. Use JS control.

After the advent of HTML5, we have a better way.

<input type="text" placeholder="用户名或邮件地址" name="username"/>

See that there is a placeholder tag, which can be used as a user text prompt. This is very convenient. But in order to be the most perfect, we need to make the text lighter or modify the style of the prompt file after selecting it. What should we do?

input::-webkit-input-placeholder { 
color: #999; 
-webkit-transition: color.5s; 
} 
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { 
color: #c2c2c2; 
-webkit-transition: color.5s; 
}

-webkit-input-placeholder, a CSS unique to webkit, can control the text style inside. With the animation effects and pseudo-classes of CSS3, we can easily make an animated input box. It is suitable for system login, search, etc. Of course, in order to be compatible with IE6, this method will not work. However, Ie9 also supports placeholder tags, but its color cannot be modified.
So, what should I do if it is not supported? You can simply use Jquery directly to help, so it is beyond the scope of this article.

Give me a Demo. The Demo address must be used in a Webkit browser to see the complete effect. Isn't it very convenient?

Method two: js control;

The code is as follows:

<script type="text/javascript">
 $(document).ready(function(){
 $("#focus .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  //聚焦型输入框验证 
  $(this).focus(function(){
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  } 
  });
 })
 $("#keydown .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  $(this).keyup(function(){
  var val=$(this).val();
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
   $(this).siblings("span").hide();
  }else{
   $(this).siblings("span").show();
  }
  })
  }) 
 })
</script>

The effect is as shown;

Click When the focus is lost, the prompt text appears, but after inputting content, the prompt text is not displayed when the focus is lost. Also, the password box is different from the text box, and the value of the password box is not displayed.

Method 3: Write directly on the label; (this is more practical)

The code is as follows:

<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value=&#39;&#39;;this.style.color=&#39;#000&#39;}" onBlur="if(!value){value=defaultValue;this.style.color=&#39;#999&#39;}" style ="#999;"/>
    </p>

Related recommendations:

The perfect solution to the textarea input box prompt text in html that must add default content

js method of displaying text box prompt text_javascript skills

jQuery Plug-in EnPlaceholder implements input box prompt text_jquery

The above is the detailed content of Input label input box with prompt text method. For more information, please follow other related articles on the PHP Chinese website!