textarea 高度自适应和光标控制
var textareaJS = {
//事件绑定
addEvent:function (el, type, callback) {
if(el.addEventListener){
el.addEventListener(type, callback, false)
}else{
el.attachEvent('on' + type, callback);
}
},
//获取像素值, 只支持 px,rem 单位
getPxValue:function(str){
var n = 0;
if(!str) return 0;
if(typeof str == 'number') return str;
if(str.search('px') != -1) n = parseFloat(str);
//当值为 '6rem' 类型时
if(str.search('rem') != -1) {
var m = parseFloat(S.getStyle(document.documentElement,"font-size"));
n = m * parseFloat(str);
};
return n;
},
/* 获取光标位置
* el 输入框元素
* isFocus 获取光标位置时是否获让该元素聚焦
*/
getPosition:function(el,isFocus) {
isFocus && el.focus ();
if (document.selection) { //低版本IE
var range = document.selection.createRange();
range .moveStart ('character', -el.value.length);
return range.text.length;
}else if (el.selectionStart != null ){ //有些input类型不支持，过滤
return el.selectionStart;
}
},
/* 设置光标位置
* el 输入框元素
* pos 位置下标，若为'last'则移动到末尾
*/
setPosition:function(el, pos) {
el.focus();
if(pos == 'last'){
pos = el.value.length
}
if(el.setSelectionRange) {
el.selectionStart = el.selectionEnd = pos;
}else if (el.createTextRange) { //IE低版本浏览器
var range = el.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
},
//获取选中文本
getSelectText:function() {
if (document.selection) { //低版本IE
return document.selection.createRange().text;
}else{
return window.getSelection().toString();
}
},
/*设置选中
* el 输入框元素
* start 起始下标
* end 结束下标
*/
setSelectText:function(el, start, end) {
var a = parseInt(start);
var b = parseInt(end);
if(start>end){
start = b;
end = a;
}else{
start = a;
end = b;
}
if(el.createTextRange){ //低版本IE
var range = el.createTextRange();
range.collapse(true);
range.moveStart("character", start);
range.moveEnd("character",end-start);
range.select();
}else{
el.setSelectionRange(start, end);
}
el.focus();
},
/*在光标处插入文字
* el 输入框元素
* value 插入的文本
*/
insertText:function(el, value) {
var len = (''+value).length;
el.focus();
if (document.selection) { //IE低版本
var range = document.selection.createRange();
range.text = value;
}else if (el.selectionStart != null ) {
var start = el.selectionStart;
var end = el.selectionEnd;
var scrollTop = el.scrollTop;
el.value = el.value.substring(0, start)
+ value +
el.value.substring(end, el.value.length);
el.selectionStart = el.selectionEnd = start + len;
el.scrollTop = scrollTop;
}else {
el.value += value;
}
},
//高度自适应
auto:function(o){
var el = o.el; //输入框元素
var height = this.getPxValue(o.height) || 100; //高度，默认100px
var width = this.getPxValue(o.width) || 200; //宽度，默认200px
var auto = o.auto || false; //是否开启高度自适应
var max = this.getPxValue(o.max); //最大高度，支持 rem 单位
var callback = o.callback || false; //输入框 input 事件
//禁止拉动
el.style.resize = 'none';
el.style.height = height + 'px';
el.style.width = width + 'px';
//添加监听事件
this.addEvent(el, 'input', change);
this.addEvent(el, 'keyup', change);
this.addEvent(el, 'focus', resize);
//异步执行处理插入文本时，先插入文本在执行高度判断
function resize(){
setTimeout(function(){ change() },0)
}
function change(){
//高度自适应
if(auto){
el.style.overflowY = 'hidden'
//页面上下滚动距离
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var boxH = el.offsetHeight;
el.style.height = height + 'px'; //每次先将高度初始化
if(el.scrollHeight > el.clientHeight ){ //判断滚动高度
var add = el.scrollHeight - el.clientHeight //增量
if( max && height + add > max ){ //是否超过最大值
el.style.height = max + 'px';
el.style.overflowY = 'auto';
}else{
el.style.height = height + add + 'px'
}
};
document.body.scrollTop = el.offsetHeight - boxH + scrollTop;
document.documentElement.scrollTop = el.offsetHeight - boxH + scrollTop;
}
if(callback) callback(el.value,el)
};
return el;
}
}