首页 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
资讯 业界资讯 软件杂谈 编程开发 网站建设 网络观查 搜索引擎 移动应用 网站运营 网络地图
开发 移动开发 Web前端 架构设计 编程语言 互联网 数据库 系统运维 云计算 开发杂谈
[编程语言] JS(javascript)动态判断输入文本框剩余可输入字符数
JS(javascript)动态判断输入文本框剩余可输入字符数

一、描述
我们在空间中发表状态,当我们输入一个字符,上面的剩余可输入字符数就会减一,直到输入的字符数达到之前设定的最大数量为止,效果如下图所示:


二、实现方法
首先,我们先确定文本框内的最大可输入长度,其次在输入一个字符抬起键盘的时候对输入文本框中的字符长度进行验证,并在动态显示在剩余可输入字符数中。
三、源代码
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";


%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	
	
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>版块</title>


<style type="text/css">
.pbt {
    margin-bottom: 10px;
}
.ie6 .pbt .ftid a, .ie7 .pbt .ftid a {
    margin-top: 1px;
}
.cl:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
</style>
<script type="text/javascript">	


		//光标离开这个textField就验证该文本框是否为空
		function check(){		   
		    var forumPost = document.getElementById("subject");
			var forumPostName = forumPost.value;
			var subjectchkRule = document.getElementById("subjectchk");
			var postNameRule = document.getElementById("postNameRule");
			
			postNameRule.style.color="#FF0000";
			if(forumPostName == ""){
				subjectchkRule.style.display="none";
				postNameRule.style.display="none";
				postNameRule.innerHTML="*帖子标题不能为空";
				forumPost.focus();					
			}
            else{
            	postNameRule.innerHTML="";
		    }			
			
		}
		
		// 只要键盘一抬起就验证编辑框中的文字长度,最大字符长度可以根据需要设定
		function checkLength(obj)  { 
			
		    var maxChars = 80;//最多字符数     
		    var curr = maxChars - obj.value.length; 
		    if( curr > 0 ){
		    	document.getElementById("checklen").innerHTML = curr.toString(); 
		    }else{
		    	document.getElementById("checklen").innerHTML = '0';
		    	document.getElementById("subject").readOnly=true;
		    }
		} 
		
</script>
</head>
<body>
	<div class="pbt cl">								
		<s:textfield name="mcpForumPost.postTitle" id="subject" size="80" maxlength="80" theme="simple" onblur="check()"  onkeyup="checkLength(this)"  accessKey="1" tabindex="11"></s:textfield>
		<span id="subjectchk">
			还可输入
			<strong id="checklen" style="color:#FF0000">80</strong>
			个字符
		</span>
		<span id="postNameRule" class="spn_flag_1" style="display:none" ></span>
	</div>
</body>	
</html>



 此文从网络中自动搜索生成,不代表本网站赞成被搜索网站的内容或立场    查看原文
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年9日历
2018-9-25 15:47:46
 
  网站联系 软件世界网-www.sjsjw.com ©2014 蜀ICP备06016416号 三峰网旗下网站