`
rain_2372
  • 浏览: 683211 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS实现每行固定字数,自动换行

    博客分类:
  • js
阅读更多
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
分享到:
评论

相关推荐

    canvas绘制文本内容自动换行的实现代码

    本文将详细介绍如何使用JavaScript编写一个函数,实现在Canvas上绘制文本内容时自动换行。 首先,我们需要理解Canvas API中的`fillText()`方法,它是用来在Canvas上填充文本的。但这个方法不支持文本换行,所以我们...

    flex重载Button 文本自动换行

    本文将详细介绍如何重载Flex的Button,实现文本自动换行的功能。 1. Flex基础 Flex是一种流行的前端布局模式,它允许开发者在容器内动态调整子元素的位置和大小,以适应不同的屏幕尺寸和设备。在Flex布局中,每个...

    重绘ComBox控件实现换行 当文本达到一定长度时实现换行

    在实现换行功能前,需要先计算文本的宽度。可以使用GDI的`TextOut`函数或者GDI+的`DrawString`函数,它们在绘制文本的同时返回其实际宽度。通过比较这个宽度与控件的宽度,可以判断是否需要换行。 4. **换行算法**...

    VUE导出Excel,两种方法,方法二带样式:文字居中,自动换行,列宽设置,单元格合并,冻结表头等

    在标题提到的两种方法中,我们将重点讨论如何利用SheetJS和xlsx-style库来实现更复杂的Excel导出功能,如文字居中、自动换行、列宽设置、单元格合并以及冻结表头。 SheetJS是一个强大的JavaScript库,它允许开发者...

    sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色,居中,自动换行,宽度,百分数展示等

    而xlsx-style是SheetJS的一个扩展,它为SheetJS增加了样式支持,允许我们在前端生成具有丰富样式的Excel表格,如设置单元格背景色、文本居中、自动换行、调整宽度以及显示百分比等。 首先,让我们深入了解SheetJS的...

    javascript经典特效---textarea是否自动换行.rar

    textarea是否自动换行.rartextarea是否自动换行.rartextarea是否自动换行.rartextarea是否自动换行.rartextarea是否自动换行.rartextarea是否自动换行.rar

    D3.js封装文本实现自动换行和旋转平移等功能

    我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧。 一、引用 multext.js 文件 multext.js function appendMultiText(container, str, posX, posY, width, fontsize,...

    css实现连续的英文或数字自动换行的方法

    这个属性允许表格布局使用固定布局算法,即第一行的单元格宽度固定,之后的行也会用这个宽度。在这种情况下,`nowrap`属性能够强制内容不换行。于是,连续的英文或数字可以在满足`table-layout:fixed;`的表格中实现...

    CSS代码使纯英文数字自动换行的简单实现

    当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行 并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识...

    DIV 文字可以换行但是纯数字和字母不可以换行解决方案

    例如,通过JavaScript动态添加换行符来控制文本换行,但这通常需要更多的代码实现,并且可能会增加页面的复杂度。 通过上述方法的应用,我们可以有效地解决纯数字或字母在`&lt;div&gt;`容器内无法正常换行的问题,从而...

    PHPstorm启用自动换行的方法详解(IDE)

    - **团队协作**:当团队成员使用不同分辨率的显示器时,统一启用自动换行可以保证每个人看到的代码布局一致。 虽然自动换行对于大多数情况都很有用,但也有特殊情况可能需要禁用,比如在处理某些需要保持原始格式...

    关于Textarea的换行问题

    值得注意的是,虽然这段代码提供了在Java环境中处理TextArea换行问题的一个具体示例,但在实际开发中,换行处理还可能涉及更复杂的逻辑,例如自动换行、软换行与硬换行的区别、换行符的编码和解析等。在不同的应用...

    jquery实现(textarea)placeholder自动换行

    2、js方法 [removed] var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示'; $('#text1').val(placeholder); $('#text1').focus(function() { if ($(this).val() == placeholder) { $(this)....

    js显示网页固定输出的字数

    现在有很多人在开发网站新闻都会遇到一些新闻很长,,但想把最新的一些资讯放在首页,但是新闻太长,怎么办,我想输入这遍新闻1~200个,然后多出隐藏起来.呵呵,,我做出来了,,給大家参考,绝对能解决任何问题....

    atom-wrap-plus:Atom 编辑器的增强自动换行

    由于Atom编辑器是基于Node.js构建的,使用CoffeeScript可以充分利用JavaScript生态系统的优势,同时提供更易于理解和维护的代码。 在安装"atom-wrap-plus"时,你需要确保已经拥有Atom编辑器,并且熟悉如何在Atom中...

    textarea是否自动换行

    关于“textarea是否自动换行”的问题,实际上`&lt;textarea&gt;`标签自身是支持文本自动换行的。当用户在textarea中输入内容时,如果文本长度超过了当前列宽,浏览器会自动进行换行,确保文本在textarea内正常显示。 然而...

    换行TextSymbol源代码

    为了实现换行功能,开发者可能创建了一个名为`MultiLineTextSymbol`的扩展类,这个类继承自`TextSymbol`,并添加了处理多行文本的功能。 `MultiLineTextSymbol-master`这个压缩包文件很可能是包含此自定义`...

    处理textarea换行空格

    这可以通过正则表达式替换来实现,不让浏览器自动合并空格: ```javascript let text = textarea.value; let preservedSpaces = text.replace(/ +/g, function(match) { return new Array(match.length + 1).join...

    CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

    在网页设计中,我们经常会遇到一个问题,那就是英文文本在固定宽度的容器内无法自动换行,导致内容溢出。在CSS3之前,处理这种情况通常采用`overflow:hidden`或借助JavaScript来实现,但这并非最佳解决方案。自从CSS...

    prettier自动格式化去换行的实现代码

    在本文中,我们将深入探讨如何实现Prettier自动格式化去换行的功能,以及相关的配置设置。 首先,要实现Prettier自动去除换行,我们需要创建一个`.prettierrc`配置文件在项目的根目录下。这个文件用于存储Prettier...

Global site tag (gtag.js) - Google Analytics