• Jquery实现文本框输入提示


    一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示。

    网上找到一个比较好用的控件jquery.inputDefault.js

    使用方法:

    1、在jsp页面引用jquery.inputDefault.js

    <script src="/js/jquery.inputDefault.js" type="text/javascript"></script>
    

    2、需要为控件增加一个自定义属性fs,fs的值就是提示内容。

    <input type="text" id="key" name="key" fs="请输入"></input>
    

    3、然后在jsp文件中增加js调用代码:

    $(function() {
    	$('[fs]').inputDefault();
    });
    

    这个控件的实现实质上是在文本框上覆盖了一层<label>标签,通过文本框的onblur和onfocus事件来控制lable标签的显示与隐藏。

    不过这个控件有一个弱点就是如果是动态表单,会造成标签错位,即提示内容与文本框错位。

    于是自己也实现了一个input.emptyText.js

    使用方法:

    1、在jsp页面引用input.emptyText.js

    <script type="text/javascript" src="/js/input.emptyText.js"></script>
    

    2、需要为控件增加一个自定义属性emptyText,emptyText的值就是提示内容。

    <input id="title" name="title" emptyText="请输入" />
    

    3、然后在jsp文件中增加js调用代码:

    $('[emptyText]').emptyText();
    

    这种方法实际上是通过input控件的onfocus和onblur事件来控制控件的样式,onfocus事件触发时,判断控件的值是否是提示值,是则清空。onblur事件中,判断输入内容是否为空,为空则置控件的值为提示内容。

    这种方法也有一个弱点,无法输入与提示内容相同的值,且提交时要自己写代码去掉控件的提示内容。

  • 相关阅读:
    os 模块1
    除法
    python基础四(jsonossys andomstring模块、文件、函数)
    python基础三(集合、文件)
    linux下mysql安装
    linux下tomcat安装
    linux系统jdk安装
    python基础二(list,tuple元祖、dic字典,字符串)
    python基础一(安装、变量、循环、git)
    charles抓包
  • 原文地址:https://www.cnblogs.com/BensonHe/p/3974476.html
Copyright © 2020-2023  润新知