<!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>
<script type="text/javascript">
window.onload = function(){
var oH2 = document.getElementsByTagName('h2')[0];
var oTextarea = document.getElementsByTagName('textarea')[0];
var oButton = document.getElementsByTagName('button')[0];
var aRadio = document.getElementsByName('radio');
function Fallback(){
oTextarea.value != '' ? oButton.className = 'button' : oButton.className = 'button1';
if(aRadio[0].checked == true){
if(WordLength(oTextarea) > 140){
sum = 0;
for(i=0;i<oTextarea.value.length;i++){
sum += LimitLength(oTextarea.value.substr(i,1));
if(sum > 140)oTextarea.value = oTextarea.value.substr(0,i);
}
}
Limit(oTextarea,140,oH2);
}else{
Limit(oTextarea,140,oH2);
}
}
oTextarea.onkeyup = Fallback;
oButton.onclick = function(){this.className=='button1' ? Error(oTextarea) : (font_count < 0 ? Error(oTextarea) : alert('发布成功!'));};
oTextarea.oncontextmenu = function(){return false;};
}
function LimitLength(obj){
var iLen = obj;
var iLimitLength = 0;
var iLimitLength = iLen.match(/[^ -~]/g) == null ? iLen.length : iLen.length + iLen.match(/[^ -~]/g).length;
return iLimitLength;
}
function WordLength(obj){
var oVal = obj.value;
var oValLength = 0;
oVal.replace(/\n*\s*/,'')=='' ? oValLength = 0 : oValLength = oVal.match(/[^ -~]/g) == null ? oVal.length : oVal.length + oVal.match(/[^ -~]/g).length;
return oValLength
}
function Limit(obj,iNow,tit){
var oValLength = WordLength(obj);
font_count = Math.floor((iNow-oValLength)/2);
if(font_count>=0){
tit.innerHTML = "请文明发言,还可以输入<span>"+font_count+"</span>字";
return true;
}else{
tit.innerHTML = "已超出<span style='color:red'>"+Math.abs(font_count)+"</span>字";
return false;
}
return font_count
}
function Error(obj){
var oTimer = null;
var i=0;
oTimer = setInterval(function(){
i++;
i==5 ? clearInterval(oTimer) : (i%2==0 ? obj.style.backgroundColor = '' : obj.style.backgroundColor = '#ffd4d4');
},100);
}
</script>
</head>
<body>
<div class="box">
<h2>请文明发言,还可以输入<span>70</span>字</h2>
<label><textarea></textarea></label>
<div class="btn">
<div class="sel">
<input type="radio" name="radio" checked="checked"><label>文字自动回退</label><input type="radio" name="radio"><label>数字提醒超出</label>
</div>
<button class="button1"></button>
</div>
</div>
</body>
</html>
- 浏览: 97163 次
- 性别:
- 来自: 北京
最新评论
-
_大大大雄:
关于这个应用, 有些东西想要请教下您行么?
jsp 权限过滤器的应用 -
jptiancai:
博主,看了博客,收获很多,这个例子运行的时候,会报下面的错误: ...
jsp 权限过滤器的应用
发表评论
-
backbone学习资料
2015-07-20 16:37 582理论知识 backbone.js 初探http://we ... -
解析目录树
2015-06-19 19:31 466<ul id="test"> ... -
csv生成
2015-06-19 19:29 587<head> <meta -
网站性能优化解决方案
2015-06-15 14:40 701最近通过查阅资料,发现了一些其他可以提高性能优化的方案1. 使 ... -
八种创建等高列布局
2015-01-04 17:11 552高度相等列在Web页面设计中永远是一个网页设计师的需求。如果 ... -
多次调用同一异步方法体会出现使用相同的属性值问题
2014-11-27 17:56 1641《一》执行同一个方法体,里面有异步的逻辑代码,如果这个异步 ... -
时间的计算
2014-11-19 14:42 555using System; namespace Be ... -
async when then
2014-11-14 11:45 632function test1(){ var def ... -
异步并行串行编程 when
2014-11-14 11:40 670var data = { "51": ... -
HTML 与javascript自解码机制
2014-02-19 14:41 1221关于这个自解码机制,我们直接以一个例子(样例0)来进行说明: ... -
三列百分之比布局
2014-02-11 13:56 623三列布局自适应 -
JSp生重复提交解决方法
2014-01-08 15:42 667看了网上的,有几种方法: 1 在你的表单页里HEAD区加入这段 ... -
AMD 和 CMD 的区别有哪些?
2013-12-25 11:37 691AMD 是 RequireJS 在推广过程中对模块定义的规范化 ... -
firefox 专属css hack
2013-12-20 15:50 664之前只有ie6、ie6、firefox时,只要写!impo ... -
自适应网页设计
2013-11-29 10:39 748一、简单描述:随着移 ... -
跨浏览器兼容性总结
2013-11-25 10:16 3429一、 CSS样式兼容 1. F ... -
IE6 PNG背景透明解决方法(汇总)
2013-10-31 18:25 627IE6 PNG背景透明解决方法(汇总) 方法一: IE6 ... -
兼容IE6 min-width 的CSS 样式
2013-10-23 19:12 831IE6另外一个bug就是它不支持 min-width 属性. ... -
IE6 position:fixed bug (固定窗口方法)
2013-10-23 17:26 745今天herb同 学在twitter上 ... -
不确定图片大小让元素水平垂直居中
2013-10-23 16:53 735<!DOCTYPE html PUBLIC " ...
相关推荐
jquery输入框提示插件input输入框文字下拉提示添加标签代码
输入框hint文字向上浮动
输入框提示效果输入框提示效果输入框提示效果输入框提示效果
这是一款基于vue2.0的input输入框文字特效。该input输入框特效在输入框聚焦时,为输入框添加多种动画效果,极大提高交互效果。
输入框文字大小随长度变化 Edittext 和 TextView 文字大小随长度变化而变化 自定义输入框和文本框
代码为EditText悬浮文字提示的实例代码,有问题请博客留言:http://blog.csdn.net/seven2729/article/details/48655807
在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是“文本框点击时文字消失,失去焦点时文字出现”这个效果;这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码;自己会...
输入框提示列表
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
简单的css3输入框提示文字效果
这个是一个表单的背景文字提示,比如常见的注册表单,登录表单,输入框背景上有一行文字提示,已经写了注释,很容易看懂。
输入时文本自动提示,就像百度搜索那样。可以参考哦大家
用Vue实现在用户输入的向后台请求候选项,支持键盘的上下选择以及Enter确认选择。做了控制请求次数的优化!注释十分详细后台返回的数据是自己模拟的,拿过去就可以使用!2020.06.22更新降低下载积分需求,我个人原意...
简单的一个Demo 实现删除文本框的文字,删除图片能够随着文字的显示而显示
1. 输入框输入文字进行放大处理 2. 也可以作为实时赋值效果使用 eg:输入123及时显示在某个div内 兼容ie 火狐 谷歌各大主流浏览器
js屏蔽backspace后退,又不影响删除输入框文字
制作点击输入框时默认文字消失的效果 01-鼠标移动上去,边框变红第一种方法 02-鼠标点击选中输入框中的提示信息 03-鼠标移动上去,边框变红第二种方法,鼠标点击选中输入框中的提示信息 04-鼠标点击输入框,提示...
仿百度输入框智能提示,输入关键字后自动查找出相似的内容
用ajax实现的asp页输入框提示,比较经典,也比较简单实用。
首字母自动提示输入框,可根据输入的首字母进行中文的快速搜索