textarea и maxlength 2 (JavaScript)

В продолжение статьи textarea и maxlength (JavaScript). В <textarea> можно вводить текст не учитывая символ перевода каретки.

/* <textarea name='d01' cols=60 rows=13 maxlength="30" id='Ввод нового поля' class='resizable'></textarea> <div id='max_alert'></div> например для textarea с name='d01': <body bgcolor=#ffffff onload="textarea_maxlength('d01');" onResize="window_onresize();"> */ //textarea_maxlength('d01'); function textarea_maxlength(textAreaObjectName) { var i, maxLength, textArea; textArea = document.getElementById(textAreaObjectName); if (textArea) { maxLength = parseInt(textArea.getAttribute('maxlength')); if (maxLength > 0) { textArea.onchange = textArea.onkeyup = textArea.onclick = //textArea.onpaste = //textArea.onkeydown = //textArea.onkeypress = function(maxlength) { return function() { // В этой функции принимаем перевод каретки (коды символов 13,10), как незначащие символы (т.е. их количество не влияет на maxlength)!!! var btn = document.getElementById('Button1'); document.activeElement.focus(); var sel2 = document.selection.createRange(); //debugger; var caretPos_1 = getIEtextareaCaret(textArea); // Запомнить позицию курсора // test //var testDiv = document.getElementById('test_div'); //testDiv.innerText="this.value.length="+ this.value.length+", rn="+delta_rn2+"\n"+this.value; var isNeedSubstring = false; var cnt_symbol = 0; var index = 0; // Определение необходимости усечения строки // получение индекса последнего символа в строке, удовлетворяющий условию (количество символов <= maxlength) // //------------- Вариант 2 -------- if (this.value.length >=maxlength) for(var i=0; i<this.value.length; i++) { if (this.value.charCodeAt(i)!=10 && this.value.charCodeAt(i)!=13) {cnt_symbol++;} if (cnt_symbol>maxlength) { cnt_symbol--; isNeedSubstring=true; break; } index++; } //----------- //------------- Вариант 3 -------- var cnt_symbol_2 = 0, index_2=0, delta = 0, isNeedSubstring_2 = false;; var arStr = this.value.slice(0, this.value.length).split("\r\n"); if (this.value.length >=maxlength) for(var i=0; i<arStr.length; i++) { //debugger; cnt_symbol_2 = cnt_symbol_2 + arStr[i].length; if (cnt_symbol_2 > maxlength) { //delta = cnt_symbol_2 - maxlength; //cnt_symbol_2 = cnt_symbol_2 - delta; cnt_symbol_2 = maxlength; isNeedSubstring_2 = true; } index_2 = (i*2 + cnt_symbol_2); if (isNeedSubstring_2) break; } //-------------------------------- var Msg_maxLimit = document.getElementById('max_alert'); if (isNeedSubstring) { //------- Тестирование (Сравнение двух алгоритмов работы) -------------- if (cnt_symbol_2 != cnt_symbol || index_2!=index) { debugger; //------------- test Вариант 2 -------- if (this.value.length >=maxlength) for(var i=0; i<this.value.length; i++) { if (this.value.charCodeAt(i)!=10 && this.value.charCodeAt(i)!=13) {cnt_symbol++;} if (cnt_symbol>maxlength) { cnt_symbol--; isNeedSubstring=true; break; } index++; } //------------- test Вариант 3 -------- var cnt_symbol_2 = 0, index_2=0, delta = 0, isNeedSubstring_2 = false;; var arStr = this.value.slice(0, this.value.length).split("\r\n"); if (this.value.length >=maxlength) for(var i=0; i<arStr.length; i++) { debugger; cnt_symbol_2 = cnt_symbol_2 + arStr[i].length; if (cnt_symbol_2 > maxlength) { delta = cnt_symbol_2 - maxlength; cnt_symbol_2 = cnt_symbol_2 - delta; isNeedSubstring_2 = true; } index_2 = (i*2 + cnt_symbol_2); if (isNeedSubstring_2) break; } } //------------------------------------------------------------------------- //var s3 = ""+this.value; var s4 = ""+this.value.substr(0,index); this.value = s4; //testDiv.innerText = "index= "+index+"\nДо="+s3.length+"\n "+s3+"\n--------\nПосле="+s4.length+"\n"+s4+"\n----------------"; //Восстанавливаем позицию курсора var input = this; if (input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd('character', caretPos_1); range.moveStart('character', caretPos_1); range.select(); // Вывод сообщения на экран в блоке <DIV> if (Msg_maxLimit) { fontMsg = document.createElement('font'); fontMsg_b = document.createElement('b'); if (document.getElementById('fontMsg_b')==null) { fontMsg_b.id = 'fontMsg_b' fontMsg.innerText = "Вы достигли максимально возможного количества символов для этого поля: "+maxlength+" (лишние символы удаляются)"; fontMsg.color = '#ff0000'; fontMsg.size = 2; Msg_maxLimit.appendChild(fontMsg_b); fontMsg_b.appendChild(fontMsg); btn.disabled = true;// document.getElementById('Button1').disabled false Boolean } } } } else if (Msg_maxLimit) {Msg_maxLimit.innerText="";btn.disabled = false;} } }(maxLength); } } } function getIEtextareaCaret(el) { var textarea = el;//document.getElementById("myTextArea"); textarea.focus(); var selection_range = document.selection.createRange().duplicate(); if (selection_range.parentElement() == textarea) { // Check that the selection is actually in our textarea // Create three ranges, one containing all the text before the selection, // one containing all the text in the selection (this already exists), and one containing all // the text after the selection. var before_range = document.body.createTextRange(); before_range.moveToElementText(textarea); // Selects all the text before_range.setEndPoint("EndToStart", selection_range); // Moves the end where we need it var after_range = document.body.createTextRange(); after_range.moveToElementText(textarea); // Selects all the text after_range.setEndPoint("StartToEnd", selection_range); // Moves the start where we need it var before_finished = false, selection_finished = false, after_finished = false; var before_text, untrimmed_before_text, selection_text, untrimmed_selection_text, after_text, untrimmed_after_text; // Load the text values we need to compare before_text = untrimmed_before_text = before_range.text; selection_text = untrimmed_selection_text = selection_range.text; after_text = untrimmed_after_text = after_range.text; // Check each range for trimmed newlines by shrinking the range by 1 character and seeing // if the text property has changed. If it has not changed then we know that IE has trimmed // a \r\n from the end. do { if (!before_finished) { if (before_range.compareEndPoints("StartToEnd", before_range) == 0) { before_finished = true; } else { before_range.moveEnd("character", -1) if (before_range.text == before_text) { untrimmed_before_text += "\r\n"; } else { before_finished = true; } } } if (!selection_finished) { if (selection_range.compareEndPoints("StartToEnd", selection_range) == 0) { selection_finished = true; } else { selection_range.moveEnd("character", -1) if (selection_range.text == selection_text) { untrimmed_selection_text += "\r\n"; } else { selection_finished = true; } } } if (!after_finished) { if (after_range.compareEndPoints("StartToEnd", after_range) == 0) { after_finished = true; } else { after_range.moveEnd("character", -1) if (after_range.text == after_text) { untrimmed_after_text += "\r\n"; } else { after_finished = true; } } } } while ((!before_finished || !selection_finished || !after_finished)); // Untrimmed success test to make sure our results match what is actually in the textarea // This can be removed once you're confident it's working correctly var untrimmed_text = untrimmed_before_text + untrimmed_selection_text + untrimmed_after_text; var untrimmed_successful = false; if (textarea.value == untrimmed_text) { untrimmed_successful = true; } // ** END Untrimmed success test var startPoint = untrimmed_before_text.length; var endPoint = startPoint + untrimmed_selection_text.length; var selected_text = untrimmed_selection_text; // корректирвка позиции курсора для использования функций вставки курсора ( range.moveEnd() и range.moveStart() ) // необходима, в связи с тем, что эти функции обрабатывают перенос строки (2 символа "\r\n") как один символ. var delta =untrimmed_before_text.slice(0, untrimmed_before_text.length).split("\n").length-1; startPoint = startPoint-delta; //alert("Start Index: " + startPoint + "\nEnd Index: " + endPoint + "\nSelected Text\n'" + selected_text + "'"); return startPoint; } } //textarea_maxlength('d01'); function dopPunkts_maxlength(_type1) { if (document.getElementById('d02')) textarea_maxlength('d02'); if (document.getElementById('d03')) textarea_maxlength('d03'); if (document.getElementById('d04')) textarea_maxlength('d04'); if (document.getElementById('d01')) { //установка курсора в поле d01 в конец текста textarea_maxlength('d01'); var caret_d01 = document.getElementById('d01').createTextRange(); caret_d01.collapse(false); caret_d01.select(); } }

Категории

ПрограммированиеJavaScriptСобытия

Читайте также

Комментарии