web123456

textarea Height adaptability and cursor control

var textareaJS = { // Event binding addEvent:function (el, type, callback) { if(el.addEventListener){ el.addEventListener(type, callback, false) }else{ el.attachEvent('on' + type, callback); } }, //Get pixel values, only px and rem units are supported getPxValue:function(str){ var n = 0; if(!str) return 0; if(typeof str == 'number') return str; if(str.search('px') != -1) n = parseFloat(str); //When the value is '6rem' if(str.search('rem') != -1) { var m = parseFloat(S.getStyle(document.documentElement,"font-size")); n = m * parseFloat(str); }; return n; }, /* Get the cursor position * el input box element * isFocus Whether to get the element focused when obtaining the cursor position */ getPosition:function(el,isFocus) { isFocus && el.focus (); if (document.selection) { //Low version IE var range = document.selection.createRange(); range .moveStart ('character', -el.value.length); return range.text.length; }else if (el.selectionStart != null ){ //Some input types do not support filtering return el.selectionStart; } }, /* Set cursor position * el input box element * pos position subscript, if 'last', move to the end */ 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 lower version browser var range = el.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }, //Get selected text getSelectText:function() { if (document.selection) { //Low version IE return document.selection.createRange().text; }else{ return window.getSelection().toString(); } }, /*Settings are selected * el input box element * start * end end subscript */ 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){ //Low version 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(); }, /*Insert text at the cursor * el input box element * value Inserted text */ insertText:function(el, value) { var len = (''+value).length; el.focus(); if (document.selection) { //IE lower version 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; } }, //High adaptive auto:function(o){ var el = o.el; //Input box element var height = this.getPxValue(o.height) || 100; //Height, default 100px var width = this.getPxValue(o.width) || 200; //Width, default 200px var auto = o.auto || false; //Whether to enable high adaptation var max = this.getPxValue(o.max); //Maximum height, support rem units var callback = o.callback || false; //Input box input event //No pulling el.style.resize = 'none'; el.style.height = height + 'px'; el.style.width = width + 'px'; //Add a listening event this.addEvent(el, 'input', change); this.addEvent(el, 'keyup', change); this.addEvent(el, 'focus', resize); // When performing asynchronous processing of inserting text, insert the text first and perform height judgment function resize(){ setTimeout(function(){ change() },0) } function change(){ //High adaptive if(auto){ el.style.overflowY = 'hidden' //The page is scrolling up and down var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var boxH = el.offsetHeight; el.style.height = height + 'px'; //Initialize the height first each time if(el.scrollHeight > el.clientHeight ){ //Judge the scroll height var add = el.scrollHeight - el.clientHeight //Increment if( max && height + add > max ){ //Is the maximum value exceeded 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; } }