JS实现每行固定字数,自动换行
autoWrap.html 原码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.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>
<script type="text/javascript" src="autoWrap.js"></script>
</head>
<body>
<div id="div.beforeguide"
style="width: 250px;height: 200px;overflow: auto;background-color: white;">
<input type="text" name="beforeguide" id="beforeguide_0">
</div>
同步VALUE框<br>
<textarea rows="10" cols="25" name="result.beforeguide" id="result.beforeguide" readonly="readonly">巴塞罗那4-1阿森纳</textarea>
<script type="text/javascript">
var autoLength=20;//汉字作为2个字符计算
new autoWrap("beforeguide",autoLength);
</script>
</body>
</html>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
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<str.length;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("<input type='text' name='"+this.entityId+"'>");
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<str.length;i++)
{
if(i<str.length-1)
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<guide_list.length;i++)
{
if(i==0)
this.entity.value=guide_list[0];
if(i>0){
aElement=document.createElement("<input type='text' name='"+this.entityId+"'>");
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
- 大小: 20.9 KB
分享到:
相关推荐
本文将详细介绍如何使用JavaScript编写一个函数,实现在Canvas上绘制文本内容时自动换行。 首先,我们需要理解Canvas API中的`fillText()`方法,它是用来在Canvas上填充文本的。但这个方法不支持文本换行,所以我们...
这里,我们设定了一个固定的宽度和高度来模拟一个有限的容器,这样当用户输入的内容超出边界时,文本会自动换行。`word-break: normal` 是为了防止某些特殊情况下不必要的单词断行。 然而,如果想要在输入时保持 `...
在本例中,我们要探讨的是如何使用JavaScript来实现连续英文字符在指定宽度限制下的自动换行,并确保该方案能够在不同的浏览器(包括较老的IE6和IE7,以及Firefox)中兼容运行。 在CSS中,通常可以使用`word-wrap`...
本文将详细介绍如何重载Flex的Button,实现文本自动换行的功能。 1. Flex基础 Flex是一种流行的前端布局模式,它允许开发者在容器内动态调整子元素的位置和大小,以适应不同的屏幕尺寸和设备。在Flex布局中,每个...
对于复杂的布局结构,如表格或卡片式布局,可以利用`table`元素的特性实现自动换行: 1. **固定列宽(IE)** - 通过设置`table-layout: fixed;`属性,可以让表格中的列宽固定,从而强制文本在到达边界时换行。 -...
在标题提到的两种方法中,我们将重点讨论如何利用SheetJS和xlsx-style库来实现更复杂的Excel导出功能,如文字居中、自动换行、列宽设置、单元格合并以及冻结表头。 SheetJS是一个强大的JavaScript库,它允许开发者...
而xlsx-style是SheetJS的一个扩展,它为SheetJS增加了样式支持,允许我们在前端生成具有丰富样式的Excel表格,如设置单元格背景色、文本居中、自动换行、调整宽度以及显示百分比等。 首先,让我们深入了解SheetJS的...
1. **换行符的选择**:在 HTML 中,通常使用 ` ` 或 `</br>` 作为换行符,但在某些情况下可能需要考虑使用其他方式来实现换行。 2. **字符宽度的计算**:在实际应用中,除了中英文字符和部分特殊符号外,还可能会...
在使用Visual Studio Code (VSCode) 这款强大的代码编辑器进行编程时,有时会遇到一些小困扰,比如在大括号中按下回车键不自动换行并缩进的问题。这个问题对于程序员来说,确实会影响编码的流畅度和效率。本文将详细...
我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧。 一、引用 multext.js 文件 multext.js function appendMultiText(container, str, posX, posY, width, fontsize,...
这个实例可能讲解了如何在不同的编程语言或框架中实现自动换行,比如Java、Python、JavaScript等,或者是针对移动应用开发,如Android。 【描述】虽然描述部分为空,但根据标题,我们可以推断这篇文章可能提供了...
要实现自动换行但保留空白字符,可以使用`pre-wrap`,这样空白字符会被保留,同时长单词会在必要时断行。 再来说说`hyphens` 属性,它是用来控制单词在连字符处分割的。`hyphens: none;` 表示不使用连字符分词,`...
这个属性允许表格布局使用固定布局算法,即第一行的单元格宽度固定,之后的行也会用这个宽度。在这种情况下,`nowrap`属性能够强制内容不换行。于是,连续的英文或数字可以在满足`table-layout:fixed;`的表格中实现...
以下是一个名为`toBreakWord`的JavaScript函数,它接受两个参数:`intLen`(每行显示的字符数)和`id`(要应用该功能的元素ID): ```javascript function toBreakWord(intLen, id){ var obj = document....
例如,通过JavaScript动态添加换行符来控制文本换行,但这通常需要更多的代码实现,并且可能会增加页面的复杂度。 通过上述方法的应用,我们可以有效地解决纯数字或字母在`<div>`容器内无法正常换行的问题,从而...
在JavaScript编程中,实现...通过以上步骤,我们可以实现一个功能完备的表格动态添加删除行的JS特效,同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用,比如数据录入、配置管理等场景。
接下来,我们可以将此函数与HTML的事件监听器结合,实现在用户粘贴数据时自动去除换行。这里以文本输入框(input[type="text"])为例: ```html <!DOCTYPE html> 去除拷贝数据中换行符 (event)"> ...