1. 通过本文demo演示,可以很明显的看到原生js的window.onload=function(){…}与jquery 的$(document).ready(function(){…});的区别,这也是我为什么不用样式定义初始状态下隐藏第二三个显示区的原因;
2. 本文只是选项卡一个原型实现,若要用于同一页面多个选项卡,变量已集中到函数头部,可自行封装成函数;
3. 请不要问如何实现更酷很炫的效果,请自已思考添加效果;
4. 不希望大家用这个效果时只是机械的复制粘贴,思考加实践,然后消化成自己的
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
/*demo css教程*/
fieldset{border:1px solid #ccc;width:720px}
fieldset legend{ background:#a40000; color:#fff;text-align:center; padding:0 8px; margin-left:25px}
fieldset form{background:#eee; border:1px solid #ccc;margin:10px; padding:10px 10px 0}
fieldset form textarea{width:670px; height:60px; border:1px solid #ccc; line-height:25px; padding:3px;overflow:hidden;}
fieldset form textarea:focus{border:1px solid #a40000}
fieldset form p{height:30px; margin:2px 0;*margin:3px 0 3px -5px}
fieldset form p span{padding-left:8px}
fieldset form p span em{font-style:normal; font-weight:bolder; color:#047; padding:0 3px}
fieldset form p span font{color:blue; font-size:10px}
</style>
<script>
/*******************************
* @author blog http://www.3ppt.com/
* @2011.04.07
* @可自由转载及使用,但请注明版权归属
*******************************/
//原生网页特效版本
window.onload=function(){
var js=document.getelementbyid('js');//获取文本域
var info=document.getelementsbytagname('p')[0];//获取要插入提示信息的元素
var submit=info.getelementsbytagname('input')[0];//获取提交按钮
var max=js.getattribute('maxlength');//获取限制输入的最大长度
var tips教程=document.createelement('span');//新建一个提示span
var val,cur,count,warn;
submit.disabled=true;//默认不可提交
tips.innerhtml='你还可以输入<em>'+max+'</em>个字符<font>[不区分中英文字符数]</font>';
if(max){
js.onkeyup=js.onchange=function(){
submit.disabled=false;
if(info.lastchild.nodename!='span') info.appendchild(tips);//避免每次弹起都会插入一条提示信息
count=info.getelementsbytagname('em')[0];//www.3ppt.com根据输入数字变换区
warn=info.getelementsbytagname('font')[0];//副标题
val=this.value;
cur=val.length;
// for(var i=0;i<val.length; i++){ //此循环是用来判断中英文字符的,但并不建议那样做
// if(val.charcodeat(i)>255) cur+=1;
// }
if(cur==0){ //当默认值长度为0时,可输入数为默认maxlength值,此时不可提交
count.innerhtml = max;
submit.disabled=true;
warn.innerhtml='不区分中英文字符数';
}else if (cur < max) {//当默认值小于限制数时,可输入数为max-cur
count.innerhtml = max - cur;
warn.innerhtml='不区分中英文字符数';
}else{
count.innerhtml = 0;//当默认值大于等于限制数时,插入一条提示信息并截取限制数内的值
warn.innerhtml='不可再输入!';
this.value=val.substring(0,max);//此处前面的this.value不能用变量val,它们不再是同一个值
}
}
}
}
//基于jquery版本
$(function(){
var _area=$('textarea#jq');
var _info=_area.next();
var _submit=_info.find(':submit');
var _max=_area.attr('maxlength');
var _val,_cur,_count,_warn;
_submit.attr('disabled',true);
_area.bind('keyup change',function(){ //绑定keyup和change事件
_submit.attr('disabled',false);
if(_info.find('span').size()<1){//避免每次弹起都会插入一条提示信息
_info.append('<span>你还可以输入<em>'+ _max +'</em>个字符<font>[不区分中英文字符数]</font></span>');
}
_val=$(this).val();
_cur=_val.length;
_count=_info.find('em');
_warn=_info.find('font');
if(_cur==0){//当默认值长度为0时,www.3ppt.com可输入数为默认maxlength值,此时不可提交
_count.text(_max);
_submit.attr('disabled',true);
}else if(_cur<_max){//当默认值小于限制数时,可输入数为max-cur
_count.text(_max-_cur);
_warn.text('不区分中英文字符数');
}else{//当默认值大于等于限制数时,插入一条提示信息并截取限制数内的值
_count.text(0);
_warn.text('不可再输入!');
$(this).val(_val.substring(0,_max));
}
});
});
</script>
<div id="demo">
<fieldset>
<legend>原生javascript版本</legend>
<form name="jsform" action="#" method="get">
<textarea name="js" id="js" maxlength="10"></textarea>
<p><input type="submit" value="提 交" /></p>
</form>
</fieldset>
<p style="color:#fff">» 我是用来隔行的,别理我^-^</p>
<!--//原生javascript版本-->
<fieldset>
<legend>基于jquery版本</legend>
<form name="jqform" action="#" method="get">
<textarea name="jq" id="jq" maxlength="10"></textarea>
<p><input type="submit" value="提 交" /></p>
</form>
</fieldset>
<!--//基于jquery版本-->
</div>
分享到:
相关推荐
本文实例讲述了JS简单限制textarea内输入字符数量的方法。分享给大家供大家参考。具体如下: 这里演示JS限制一个area内的字符不能超过255,多余则截取。 代码如下: [removed] function getStringUTFLength(str) { ...
主要与大家分享一个JavaScript处理textarea中的字符成每一行实例,很简单,但很实用,大家可以看看
3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊...
3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊...
第1章使用JavaScript字符串 1.0简介 1.1连接两个或多个字符串 1.2连接字符串和另一种数据类型 1.3条件比较字符串 1.4在字符串中查找子字符串 1.5从一个字符串提取子字符串 1.6检查一个存在的、非空...
最长允许n个字符(中文算2位)! 代码如下: function fucCheckLength(strTemp) { var i,sum; sum=0; for(i=0;i<strTemp>=0) && (strTemp.charCodeAt(i)<=255)) { sum=sum+1; }else { sum=sum+2; } } ...
本文实例汇总了JavaScript常用验证函数。分享给大家供大家参考。具体汇总如下: 一、字符串类验证 1. 长度限制 代码如下:[removed] function test() { if(document.a.b.value.length>50) { alert(“不能超过50...
12.6.2 JavaScript代码设计 199 12.6.3 PHP代码设计 200 12.6.4 代码的运行 201 12.7 小结 202 第2篇 PHP与数据库 第13章 关系型数据库的基础知识 204 13.1 关系型数据库与关系型数据库系统的 13.1 介绍 204 13.2 ...
SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的...
由于某些字符类非常常用,所以JavaScript的正则表达式语法包含一些特殊字符和转义序列来表示这些常用的类.例如, \s 匹配的是空格符,制表符和其它空白符, \s 匹配的则是空白符之外的任何字符. 正则表灰式的字符类 ...
Layer做为弹窗,主页面代码: 注意1. callback()方法 返回字符串,再data:JSON.parse(res)转为ajax提交时的json参数 注意2. textarea 上使用append方法没有效果,改写: var str = $(“#area”).val() + “\n”+d; $...
input 和 textarea 元素中使用 v-model 实现双向数据绑定:test2/inputAndtextarea.html 两个按钮用于切换不同的列表布局:test2/layout.html 导航测试:test2/navigation.html 订单列表:test2/orderList.html 实时...
翻译JavaScript代码中的字符串280 103范式、秘诀和技巧282 按照设定的地区初始化应用282 将地区标识作为URL一部分带来的问题283 切换地区284 针对日期、数字和货币的自定义过滤器285 104小结287 第11章开发...
-Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...
-增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...
找出一个TextArea 中最后显示的字符 第五章Lists,Tiles,和Trees(147) 5.1 节.创建可编辑的list 组件 5.2节.为List的某项设置图标 5.3 节. 为List的内容变更添加特效 5.4为TileList创建一个基本的条目渲染器 5.5节...
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> ) 3.FCKeditor API 调用 (必须加头文件 *" %> ) --%> //标签调用方式 ...
1.2 JavaScript 实现..............................................2 1.2.1 ECMAScript 1.2.2 DOM..............................................5 1.2.3 BOM..............................................8 ...