html input文本框 输入框提示(hint)内容的实现


HTML开发中经常遇到input元素,往往又需要提示使用者输入一定规则的内容,这时最好的一个方法就是在input里面实现一个提示,实现如下方式:输入框为空时提示内容出现,当输入框获得焦点时或输入框不为空时则消失。

1.通过HTML5引入的新属性placeholder实现





html input 输入框提示(hint)内容的实现



Postcode:
显示提示内容“请输入...”
获取焦点后hint消失
  输入内容后hint消失
没有按照规则 pattern="[0-9]{6}"输入了7位数字,报错
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------


2.非HTML5方式,通过js方式

代码如下:




文本框获取焦点或输入文字后提示语消失






聚焦型提示语消失

输入型提示语消失

W3School在线测试


其中
 
04-11.js 是将URL:http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js代码copy到本地,方便每次快速载入,亦可以写成如下格式:
 
   
 
   
 
   
 
  
效果如下图所示:
html input文本框 输入框提示(hint)内容的实现_第1张图片


你可能感兴趣的:(HTML)