博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery实现文本框输入提示
阅读量:5072 次
发布时间:2019-06-12

本文共 630 字,大约阅读时间需要 2 分钟。

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

网上找到一个比较好用的控件

使用方法:

1、在jsp页面引用

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

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

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

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

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

于是自己也实现了一个

使用方法:

1、在jsp页面引用

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

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

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

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

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

 

转载于:https://www.cnblogs.com/BensonHe/p/3974476.html

你可能感兴趣的文章
Ajax中文乱码问题解决方法(服务器端用servlet)
查看>>
会计电算化常考题目一
查看>>
阿里云服务器CentOS6.9安装Mysql
查看>>
剑指offer系列6:数值的整数次方
查看>>
js 过滤敏感词
查看>>
poj2752 Seek the Name, Seek the Fame
查看>>
软件开发和软件测试,我该如何选择?(蜗牛学院)
查看>>
基本封装方法
查看>>
bcb ole拖拽功能的实现
查看>>
生活大爆炸之何为光速
查看>>
bzoj 2456: mode【瞎搞】
查看>>
[Typescript] Specify Exact Values with TypeScript’s Literal Types
查看>>
[GraphQL] Reuse Query Fields with GraphQL Fragments
查看>>
Illustrated C#学习笔记(一)
查看>>
理解oracle中连接和会话
查看>>
两种最常用的Sticky footer布局方式
查看>>
Scrapy实战篇(三)之爬取豆瓣电影短评
查看>>
HDU 5510 Bazinga KMP
查看>>
[13年迁移]Firefox下margin-top问题
查看>>
Zookeeper常用命令 (转)
查看>>