HTML怎么限制每行字数,JS实现每行固定字数,自动换行
JS实现每行固定字数,自动换行
autoWrap.html 原码
.wrap_focus{border-width: 3px;border-style: solid;border-color:orange;width: 250px;height: 25px;font-size: 16px;font-weight: bolder;};
.wrap_blur{border-width:0 0 1px 0;border-style: solid;width: 250px;height: 25px;font-size: 16px;font-weight: bolder;};
style="width: 250px;height: 200px;overflow: auto;background-color: white;">
同步VALUE框
巴塞罗那4-1阿森纳
var autoLength=20;//汉字作为2个字符计算
new autoWrap("beforeguide",autoLength);
///
autoWrap.js 原码
var autoWrap=function(entityId,length){
this.divId="div."+entityId;//初始化外层DIVID
this.resultId="result."+entityId;//初始化同步结果TEXTID
this.entityId=entityId;//初始化默认TEXTID
this.length=length;//每行最长长度
this.split="/r/n";
this._init();
};
autoWrap.prototype.get=function(e){
return typeof(e)=='string'?document.getElementById(e):e;
};
autoWrap.prototype.addEvent=function(o,e,fn){
window.attachEvent ?o.attachEvent('on'+e,fn):o.addEventListener(e,fn,false);
};
autoWrap.prototype.removeEvent=function(o,e,fn){
window.detachEvent ?o.detachEvent('on'+e,fn):o.removeEventListener(e,fn,false);
};
autoWrap.prototype.wrapkeyup=function(e){//按键弹起事件
//判断是否超长
var str=e.srcElement.value;
var num=0;
var wrap_i=0;
for(i=0;i
num++;
if(str.charCodeAt(i)>255)num++;//汉字作为2个字符计算
if(num>this.length)
{
wrap_i=i;
break;
}
}
if(wrap_i>0)//是否超长
e.srcElement.value=str.substring(0,wrap_i);
else
this.oldValue=str;
//数据同步处理
this.setResultValue(this.entityId);
}
autoWrap.prototype.wrap=function(e){
var id_end=e.srcElement.id.split("_")[1];//ID后缀
//
if(e.keyCode==13){//回车事件
var srcElement=this.get(this.entityId+"_"+id_end);
id_end++;//自动增加为下一个ID
var aElement=this.get(this.entityId+"_"+id_end);
if(aElement)//是否存在下一个,存在则使其获得焦点
{
aElement.focus();
}
else//是否存在下一个,不存在则创建
{
aElement=document.createElement("");
aElement.id=this.entityId+"_"+id_end;
aElement.className="wrap_text";//初始化CSS
var self=this;
this.addEvent(aElement,'keydown',function(e){self.wrap(e)});
this.addEvent(aElement,'keyup',function(e){self.wrapkeyup(e)});
this.addEvent(aElement,'focus',function(e){self.wrapfocus(e)});
this.addEvent(aElement,'blur',function(e){self.wrapblur(e)});
this.div.appendChild(aElement);
aElement.focus();
}
}
//
if(e.keyCode==8&&e.srcElement.value.length==0){//回格事件
if(id_end>0)//判断是否最初的一个
{
id_end--;//自动减少为上一个ID
var aElement=this.get(this.entityId+"_"+id_end);
aElement.focus();
var textRange=aElement.createTextRange();
textRange.collapse(false);
textRange.select();
this.div.removeChild(e.srcElement);
}
}
//
};
autoWrap.prototype.wrapfocus=function(e){
e.srcElement.className="wrap_focus";
}
autoWrap.prototype.wrapblur=function(e){
e.srcElement.className="wrap_blur";
}
autoWrap.prototype.setResultValue=function(arg){
var str=document.getElementsByName(arg)
var temp_str="";
for(i=0;i
{
if(i
temp_str+=str[i].value+"\r\n";
else
temp_str+=str[i].value;
}
this.result.value=temp_str;
};
//初始化默认值输入框TEXT
autoWrap.prototype._initValue=function(){
//取得同步结果TEXT初始值,进行初始化
var guide=this.result.value;
if(guide.length>0)
{
var guide_list=guide.split(this.split);
for(i=0;i
{
if(i==0)
this.entity.value=guide_list[0];
if(i>0){
aElement=document.createElement("");
aElement.id=this.entityId+"_"+i;
aElement.value=guide_list[i];
aElement.className="wrap_blur";
var self=this; //初始化默认TEXT事件
this.addEvent(aElement,'keydown',function(e){self.wrap(e)});
this.addEvent(aElement,'keyup',function(e){self.wrapkeyup(e)});
this.addEvent(aElement,'focus',function(e){self.wrapfocus(e)});
this.addEvent(aElement,'blur',function(e){self.wrapblur(e)});
this.div.appendChild(aElement);
}
}
}
}
autoWrap.prototype._init=function(){
this.div=this.get(this.divId);//外层DIV
this.entity=this.get(this.entityId+"_0");//默认TEXT
this.result=this.get(this.resultId);//同步结果TEXT
this.entity.className="wrap_blur";//初始化默认TEXT样式
if(typeof this.entity!='object'){
alert('entity is not object!');
return;
}
var self=this; //初始化默认TEXT事件
this.addEvent(this.entity,'keydown',function(e){self.wrap(e)});
this.addEvent(this.entity,'keyup',function(e){self.wrapkeyup(e)});
this.addEvent(this.entity,'focus',function(e){self.wrapfocus(e)});
this.addEvent(this.entity,'blur',function(e){self.wrapblur(e)});
this._initValue();
};
转http://www.huomo.cn/developer/article-e280.html
来源:CSDN
作者:iteye_1744
链接:https://blog.csdn.net/iteye_1744/article/details/82507324
HTML怎么限制每行字数,JS实现每行固定字数,自动换行相关推荐
- html多行合并,Js表格多行合并实现,可对多个列进行处理
先看下效果: 然用能境战求道,重件开又是正易里是了些之框后看完整代码,里面有详细的注释求圈分件圈浏第用代是水刚道.的它还: test table /* *思路: * 1.根据需要合并的字段的先后顺序对 ...
- 动态增删表格行(纯JS写法)
动态增删表格行(纯JS写法) 归档 进行表格下行的动态增加与删除 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
- js获取datagrid行,但是行改变了肿么办?
这个任务原先以为挺简单的,就是当点击datagrid中的行,就将这行的id插入到text文本框中.但是问题是一个一个接踵而来,让我措手不及啊. question1:界面是由两个datagrid组成,点 ...
- js 实现 table 行上移 (数据库)
通过js实现表格行的上下移动,有两种情况: 1.只对显示层操作(即只针对页面的移动并不更新到数据库) 2.显示层的移动更新到数据库中 下面我分布就这两种方式的实现进行说明(我使用的是jquery ea ...
- html ul 位置上移,JS移动li行数据,点击上移下移(是位置的互换,不是top的偏移量改变)...
JS移动li行数据,点击上移下移 * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon {width:50 ...
- JS实现奇偶行变色,鼠标滑上改变颜色,离开恢复颜色
JS实现奇偶行变色,鼠标滑上改变颜色,离开恢复颜色 css 奇偶行变色是通过 li:nth(odd) 和 li:nth(even) 实现的,鼠标滑上改变颜色,离开恢复颜色是通过 :hover 实现的 ...
- 58行html/js代码实现图片裁剪并保存功能
58行html/js代码实现图片裁剪保存功能 <input type="file" id="file-input" accept="image/ ...
- JS 限制input框的输入字数,并提示可输入字数
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
- android编辑框最大字数,TextView 限制最大行数、最小行数、字数超过“...”表示...
最小行数: android:minLines = "2" //最小行数为2 最大行数: android:maxLines = "2" //最大行数为2 文字超过 ...
最新文章
- 编程珠玑第四章习题答案
- python安装pyqt5 qml_PyQt5:PyQt5程序打包2
- Linux启动重启停止DNS,ubuntu怎么开机停止启动smbd
- 注定一爆就完的ZAO ,为什么只是一剂社交毒药?
- asp.net mvc项目实例_降龙-第13章:MVC开发准备
- 布尔(bool)全排列
- 【李宏毅2020 ML/DL】P67-72 Anomaly Detection
- warning C4819 解决方案 warning C4819: The file contains a character that cannot be represented in the cu
- Python环境下工具安装小结
- (转) SpringBoot非官方教程 | 第一篇:构建第一个SpringBoot工程
- 【sklearn第五讲】特征提取(上)
- 编译ROS-Academy-for-Beginners
- 【数学建模】预测模型之BP网络预测
- 计算机系统常见故障及处理,电脑常见故障以及解决方案都在这里!
- APISpace 行驶证OCR API
- Nginx不停机升级
- 视频播放器软件哪个最好用?盘点6款Windows电脑上超级好用的本地视频播放器
- matlab画条状图,使用Matlab画条形图
- 区块链-区块链的概念
- 如何对APP进行重新签名(使用命令签名)
热门文章
- 腾讯云TDSQL官宣:全球招人!
- 是什么能让 APP 快速精准定位到我们的位置?
- 腾讯无边界网络 致胜企业安全新战场
- 贺TDSQL喜提286万QPS!本文回顾了它的十年锻造之路
- PMP之项目质量管理---项目质量管理措施
- go 随机数是重复的
- 使VM的虚拟机内存超越物理内存的方法
- leetcode 452. Minimum Number of Arrows to Burst Balloons | 452. 用最少数量的箭引爆气球(左程云:最大线段重合问题)
- Linux中source命令的用法:修改环境变量之后立即生效
- Scala教程之:可变和不变集合