Как я могу держать курсор в своем положении в textarea после автоматической отправки?

Question

У меня есть форма и textarea, я автоматически отправляю для формы через х секунд ... Но каждый раз, когда автоматически отправляется, курсор выпрыгивает из textarea ... , так как я могу сохранить курсор после отправки в старом положении в текреаре?

Answer 1

В вашем auto submit код получить текущую позицию курсора в textarea. Вы можете сделать это с помощью этой функции (где id является атрибутом идентификатор textarea элемента):

function getCaretPosition(id) { 
    var txt = document.getElementById(id); 
    var startPos = txt.selectionStart; 
    var endPos = txt.selectionEnd; 
    return endPos; 
} 

Чем хранить значение где-то (в localstorage, например), и после отправки формы восстановить положение курсора с эта функция:

function setCaretPosition(id) { 
    var txt = document.getElementById(id); 
    if(txt.createTextRange) { 
     var range = txt.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', caretPos); 
     range.moveStart('character', caretPos); 
     range.select(); 
     return; 
    } 

    if(txt.selectionStart) { 
     txt.focus(); 
     txt.setSelectionRange(caretPos, caretPos); 
    } 
} 

где caretPos позиция курсора сохраняется до представить. Вот простая демонстрация, чтобы увидеть, как работают функции https://jsfiddle.net/p0oc8tjs/2/

Answer 2

Используйте атрибут textarea autofocus. Пример:

<textarea autofocus></textarea> 

Этот логический атрибут позволяет указать, что элемент формы должен иметь фокус ввода при загрузке страницы, если пользователь не отменяет его, , например, введя в другом элементе управления. Этот атрибут может содержать только один связанный с формой элемент .

Если вы все еще хотите использовать скрипт и установить последнюю позицию курсора, чем при использовании sessionStorage вы можете сделать:

$.fn.getCursorPosition = function() { 
 
    var el = $(this).get(0); 
 
    var pos = 0; 
 
    if('selectionStart' in el) { 
 
     pos = el.selectionStart; 
 
    } else if('selection' in document) { 
 
     el.focus(); 
 
     var Sel = document.selection.createRange(); 
 
     var SelLength = document.selection.createRange().text.length; 
 
     Sel.moveStart('character', -el.value.length); 
 
     pos = Sel.text.length - SelLength; 
 
    } 
 
    return pos; 
 
}; 
 
$.fn.selectRange = function(start, end) { 
 
    if(end === undefined) { 
 
     end = start; 
 
    }; 
 
    return this.each(function() { 
 
     if('selectionStart' in this) { 
 
      this.selectionStart = start; 
 
      this.selectionEnd = end; 
 
     } else if(this.setSelectionRange) { 
 
      this.setSelectionRange(start, end); 
 
     } else if(this.createTextRange) { 
 
      var range = this.createTextRange(); 
 
      range.collapse(true); 
 
      range.moveEnd('character', end); 
 
      range.moveStart('character', start); 
 
      range.select(); 
 
     } 
 
    }); 
 
}; 
 
var textarea = $('.remember-cursor'); 
 
textarea.on('input click keyup', function(e) { 
 
\t sessionStorage.cursorPosition = textarea.getCursorPosition(); 
 
}); 
 
$(document).on('ready', function(e) { 
 
    textarea.focus().selectRange(sessionStorage.cursorPosition); 
 
}); 
 
$('button').on('click', function(e) { 
 
\t $(document).trigger('ready'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="remember-cursor">adsfsadfsad</textarea> 
 
<button>Trigger DOM ready</button>

Благодаря этому сообщений и ответов:

• Cursor position in a textarea
• jQuery Set Cursor Position in Text Area

Также на JSFiddle.

Все еще, я не думаю, это правильный способ сделать это. Вы должны отправлять свои данные через AJAX и собирать результаты.