자동 제출 후 커서를 텍스트 영역의 위치에 유지할 수 있습니까?

Question

양식과 텍스트 영역이 있습니다. x 초 후에 자동으로 양식을 제출합니다 ...하지만 자동 제출이 완료되면 커서가 텍스트 영역 밖으로 점프합니다 ... 그래서 이전 위치에서 제출 한 후 커서를 유지할 수 있습니까? 텍 사레 아에?

Answer 1

에서 코드를 제출하면 textarea에 커서의 현재 위치가 표시됩니다. 당신은 (id가 textarea 요소의 id 속성이다)이 기능을 수행 할 수 있습니다 (예를 들어 localstorage에) 어딘가에 값을 저장보다

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

는, 양식 이후에 커서 위치를 복원 제출 이 기능 : caretPos를 제출하기 전에 저장된 커서 위치입니다

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); 
    } 
} 

. 여기에 간단한 동작 데모가 있습니다. 코드를 보지 않고도 https://jsfiddle.net/p0oc8tjs/2/

Answer 2

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를 통해 데이터를 게시하고 결과를 수집해야합니다.