`

封装js操作textarea 方法集合(兼容很好)。

 
阅读更多
【分享】 封装js操作textarea 方法集合(兼容很好)。
请使用下面的btn操作。
虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下。
abcdefghijklmnopqrstuvwxyz

在DOM里面操作textarea里面的字符,是比较麻烦的。

于是我有这个封装分享给大家,测试过IE6,8, firefox ,chrome, opera , safari。兼容没问题。



注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美。如果有高手也研究过,麻烦指点下。

var TT = {

/*
* 获取光标位置
* @Method getCursorPosition
* @param t element
* @return number
*/
getCursorPosition: function(t){
if (document.selection) {
t.focus();
var ds = document.selection;
var range = ds.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText(t);
stored_range.setEndPoint("EndToEnd", range);
t.selectionStart = stored_range.text.length - range.text.length;
t.selectionEnd = t.selectionStart + range.text.length;
return t.selectionStart;
} else return t.selectionStart
},


/*
* 设置光标位置
* @Method setCursorPosition
* @param t element
* @param p number
* @return
*/
setCursorPosition:function(t, p){
this.sel(t,p,p);
},

/*
* 插入到光标后面
* @Method add
* @param t element
* @param txt String
* @return
*/
add:function (t, txt){
var val = t.value;
if(document.selection){
t.focus()
document.selection.createRange().text = txt;
} else {
var cp = t.selectionStart;
var ubbLength = t.value.length;
var s = t.scrollTop;
// document.getElementById('aaa').innerHTML += s + '<br/>';
t.value = t.value.slice(0,t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength);
this.setCursorPosition(t, cp + txt.length);
// document.getElementById('aaa').innerHTML += t.scrollTop + '<br/>';
firefox=navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function(){
if(t.scrollTop != s) t.scrollTop=s;
},0)

};
},


/*
* 删除光标 前面或者后面的 n 个字符
* @Method del
* @param t element
* @param n number n>0 后面 n<0 前面
* @return
* 重新设置 value 的时候 scrollTop 的值会被清0
*/
del:function(t, n){
var p = this.getCursorPosition(t);
var s = t.scrollTop;
var val = t.value;
t.value = n > 0 ? val.slice(0, p - n) + val.slice(p):
val.slice(0, p) + val.slice(p - n);
this.setCursorPosition(t ,p - (n < 0 ? 0 : n));
firefox=navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function(){
if(t.scrollTop != s) t.scrollTop=s;
},10)
},

/*
* 选中 s 到 z 位置的文字
* @Method sel
* @param t element
* @param s number
* @param z number
* @return
*/
sel:function(t, s, z){
if(document.selection){
var range = t.createTextRange();
range.moveEnd('character', -t.value.length);
range.moveEnd('character', z);
range.moveStart('character', s);
range.select();
}else{
t.setSelectionRange(s,z);
t.focus();
}

},


/*
* 选中一个字符串
* @Method sel
* @param t element
* @param s String
* @return
*/
selString:function(t, s){
var index = t.value.indexOf(s);
index != -1 ? this.sel(t, index, index + s.length) : false;
}

}
分享到:
评论

相关推荐

    js封装的textarea操作方法集合(兼容很好)

    首先,从标题《js封装的textarea操作方法集合(兼容很好)》我们可以得知,本文介绍的是一系列JavaScript函数集合,这些函数专门用于操作HTML中的多行文本输入框(textarea)。这些方法被封装得当,以提供良好的浏览器...

    js操作textarea方法集合封装(兼容IE,firefox)

    总结来说,熟练掌握对textarea元素的操作方法,并能够对它们进行跨浏览器的兼容性封装,是前端开发中一项必备的技能。这不但能够提高开发效率,同时也能保证用户在各种环境下的交互体验。希望本知识点的解析能帮助到...

    js操作textarea 常用方法总结

    虽然原生JavaScript提供了基本的DOM操作方法,但是针对textarea的操作往往需要更细致和高效的处理。本文将总结一些常用的JavaScript操作textarea的方法,这些方法可以在各种主流浏览器中使用,并通过实际测试验证了...

    textarea 自适应大小 兼容Chrome ie等浏览器

    textarea 自适应大小 兼容Chrome ie等浏览器,自动调整大小

    textarea,textbox高亮关键字

    最近开发的时候做了textarea 高亮关键字,尝试过很多方法,比如用iframe,和编辑器替换,当然这也是一个方法,但是原来是用textbox的内容要达到兼容这两种方法是做不到的,所以这里是使用jquery插件和jquery核心文件搞的...

    JavaScript获取,设置光标位置,兼容InputTextArea

    在JavaScript编程中,获取和设置光标位置是常见的需求,特别是在与用户交互的表单元素如`&lt;input&gt;`和`&lt;textarea&gt;`中。这涉及到DOM(文档对象模型)操作和事件处理,对于创建动态和响应式的网页应用至关重要。本文将...

    JavaScript实现textarea的maxlength

    标题"JavaScript实现textarea的maxlength"指出,我们将探讨如何使用JavaScript来动态地实现和管理`textarea`的`maxlength`属性。这可能是为了在用户输入时实时检查字符数,或者在用户超过限制时给出反馈。 首先,...

    jQuery Textarea全屏插件Textarea Fullscreen

    jQuery Textarea Fullscreen插件通过绑定事件监听器来触发全屏模式,当用户点击特定的按钮或执行特定操作时,textarea元素会扩展至浏览器窗口的边界。同时,插件还提供了退出全屏模式的功能,确保用户可以根据需要...

    textArea滚动条样式

    本文将详细介绍如何使用JavaScript来实现`textarea`滚动条样式的自定义,以实现跨浏览器的兼容性。 首先,我们需要理解CSS3提供了对滚动条样式的一些控制,如`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等...

    js限制textarea每行输入字符串长度的代码.docx

    在JavaScript中,对`textarea`元素进行输入字符串长度限制是一个常见的需求,特别是在处理用户输入时,需要确保数据格式的正确性。在HTML中,`textarea`控件不像`input[type="text"]`那样可以直接通过`maxlength`...

    使用JS在textarea在光标处插入内容

    在JavaScript中,要实现在`textarea`的光标处插入内容,我们需要考虑浏览器的兼容性问题,因为不同的浏览器处理文本选择的方式不同。主要有两种方法: ##### A. IE支持 对于Internet Explorer浏览器,使用`...

    textarea框增加行号效果

    在网页开发中,`textarea` 是一个常用的元素,用于接收用户输入多行文本。然而,原始的 `textarea` 没有内置的功能来显示行号,这对于需要进行代码编辑或者查看多行文本的场景来说不够友好。为了提高用户体验,...

    textarea输入限制方法

    本文将详细介绍如何通过JavaScript实现`textarea`的输入长度限制,包括如何设置最大输入长度、如何阻止超出长度的输入、如何限制复制粘贴及鼠标拖放等操作。 #### 一、基础知识介绍 1. **`textarea`标签**:HTML中...

    全兼容input/textarea标签的placeholder属性JS插件

    该插件完整兼容placeholder属性。插件由原生JS编写,无需任何其他插件支持,并且使用简单,只需一行JS调用即可。 博客地址:http://blog.csdn.net/qq_17076445/article/details/78212240

    关于Textarea的换行问题

    换行处理的核心逻辑封装在`huanhang()`方法中。该方法首先获取当前TextArea中的文本内容,然后检查`menuitem19`的状态。如果`menuitem19`被选中,即用户可能通过某种界面操作选择了特定的换行模式或界面布局,那么...

    layui 富文本编辑器和textarea值的相互传递方法

    Layui是一款基于jQuery的...希望上述内容能够帮助开发者更好地掌握Layui富文本编辑器与textarea值传递的方法,从而在开发工作中提升效率和性能。如在实践中有任何疑问或发现更多高效的实现方法,欢迎与社区分享交流。

    textarea 样式

    在探讨“textarea样式”的主题时,我们聚焦于如何利用CSS(层叠样式表)来美化和定制HTML中的`&lt;textarea&gt;`元素。`&lt;textarea&gt;`是一个用于接收多行文本输入的标准HTML元素,在网页表单设计中极为常见。通过CSS,我们...

Global site tag (gtag.js) - Google Analytics