`
舟舟同学
  • 浏览: 44434 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

JQuery开发6-文本框字数限制和提示文本的影藏与显示

jQuery 
阅读更多

在网页中，为例提高用户体验，往往会在用户使用文本框时提示文本框最大限定字数以及当用户输入后，提示还可以输入的字符数，这里用到了另外一个插件charCount.js来实现该功能。

以下参考程序实现的功能有

1、限制文本框里面的字符数，当超过规定的字符数时不能再继续输入，用户在输入过程中会提示还可以输入的字符数

2、文本框内会出现默认灰色的提示文本，当文本框获得焦点时，比如用鼠标点击该文本框，提示文本会自动影藏，当文本框离开焦点时又会恢复默认的提示文本。

参考代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript"
	src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script language="javascript"
	src="${pageContext.request.contextPath}/script/jquery.charcount.js"></script>
<script>
			$(document).ready(function() {
			$("#test1").focus(function(){//元素获得焦点猝发事件
			if($("#test1").val()==this.title)
			{
			$("#test1").val("");
			}
			});
			$("#test1").blur(function(){//失去焦点的猝发事件
			if($("#test1").val()=="")
			{
			$("#test1").val(this.title);
			}
			});
				$("#test1").charcount({//限制文本框输入字数
					maxLength: 50,
					preventOverage: true
				});
			}); 
		</script>
<style>
input {
	width: 30%;
	margin: 0;
	display: block;
}

.charcount-display {
	display: block;
	margin: 0 0 3px 0;
	color: #c00;
}

.charcount-position-after {
	margin: 3px 0 0 0;
}

.charcount-overage {
	color: #c00;
}
</style>
</head>
<body>
	<div id="page-wrapper">
		<div class="demo">
			<h2>请输入内容</h2>
			<input type="text" id="test1" class="countable" value="搜索...."
				title="搜索...." />
		</div>
	</div>
</body>
</html>

 附：charCount.js文件

0
顶
2
踩
分享到：
| JQuery开发5-在网页中获取鼠标的三种坐标
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics