jQuery를 사용하여 마우스 포커스를 설정하고 커서를 입력 끝으로 이동
이 질문은 몇 가지 다른 형식으로 요청하여 내 시나리오에서 작동하는 답을 얻을 수 없습니다.
사용자가 위 / 아래 화살표를 눌렀을 때 jQuery를 사용하여 명령 기록을 구현하고 있습니다. 위쪽 화살표를 눌렀을 때 화살표를 이전 명령으로 바꾸고 입력 필드에 포커스를 설정하지만 커서는 항상 입력의 입력 위치 지정합니다.
내 코드는 다음과 달라집니다.
$(document).keydown(function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
var input = self.shell.find('input.current:last');
switch(key) {
case 38: // up
lastQuery = self.queries[self.historyCounter-1];
self.historyCounter--;
input.val(lastQuery).focus();
// and it continues on from there
포커스 후 '입력'끝에 커서를 강제로 배치해야합니까?
증가를 적용 후 값을 지우고 작업을 전개하는 것입니다.
input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);
조금 이상하고 어리석은 것처럼 보이지만 이것은 나를 위해 일하고 있습니다.
input.val(lastQuery);
input.focus().val(input.val());
이제 설정을 확실하게 복제합니다. 나는 요소 라고 가정 input하고 <input>있습니다.
값을 (자체로) 존재하면 커서가 입력의 끝에 놓이는 것입니다. Firefox 3 및 MSIE7에서 테스트되었습니다.
도움이 되셨기를 바랍니다.
var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);
한 줄로 ...
$('#txtSample').focus().val($('#txtSample').val());
이 라인은 저에게입니다.
Chris Coyier에는 완벽하게 작동하는 미니 jQuery가 있습니다. http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
지원되는 경우 setSelectionRange를 사용하고 확실한 대체 기능이 있습니다.
jQuery.fn.putCursorAtEnd = function() {
return this.each(function() {
$(this).focus()
// If this function exists...
if (this.setSelectionRange) {
// ... then use it (Doesn't work in IE)
// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
var len = $(this).val().length * 2;
this.setSelectionRange(len, len);
} else {
// ... otherwise replace the contents with itself
// (Doesn't work in Google Chrome)
$(this).val($(this).val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Google Chrome)
this.scrollTop = 999999;
});
};
그런 다음 다음을 수행 할 수 있습니다.
input.putCursorAtEnd();
2 artlung 의 답변 : 내 코드 (IE7, IE8; Jquery v1.6)에서만 두 번째 줄에서 작동합니다.
var input = $('#some_elem');
input.focus().val(input.val());
추가 : 입력 입력 요소가 JQuery와를 사용하여 DOM 추가 된에 경우 IE에서 포커스가 설정되지 않습니다. 나는 약간의 트릭을 사용했습니다.
input.blur().focus().val(input.val());
Ref : @ will824 코멘트,이 솔루션은 호환성 문제없이 저에게 효과적이었습니다. 나머지 솔루션은 IE9에서 실패했습니다.
var input = $("#inputID");
var tmp = input.val();
input.focus().val("").blur().focus().val(tmp);
테스트를 거쳐 다음에서 작동 함
Firefox 33
Chrome 34
Safari 5.1.7
IE 9
이 답변이 늦게 오는 것을 알고 있지만 사람들이 답을 찾지 못한 것을 볼 수 있습니다. return false이벤트를 처리하는 메서드 에서 위쪽 키가 커서를 처음에 놓는 것을 방지합니다 . 이렇게하면 커서 이동으로 이어지는 이벤트 체인이 중지됩니다. 아래 OP에서 수정 된 코드를 붙여 넣습니다.
$(document).keydown(function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
var input = self.shell.find('input.current:last');
switch(key) {
case 38: // up
lastQuery = self.queries[self.historyCounter-1];
self.historyCounter--;
input.val(lastQuery).focus();
// HERE IS THE FIX:
return false;
// and it continues on from there
아래 코드를 사용하고 잘 작동합니다.
function to_end(el) {
var len = el.value.length || 0;
if (len) {
if ('setSelectionRange' in el) el.setSelectionRange(len, len);
else if ('createTextRange' in el) {// for IE
var range = el.createTextRange();
range.moveStart('character', len);
range.select();
}
}
}
브라우저마다 다릅니다.
이것은 ff에서 작동합니다.
var t =$("#INPUT");
var l=$("#INPUT").val().length;
$(t).focus();
var r = $("#INPUT").get(0).createTextRange();
r.moveStart("character", l);
r.moveEnd("character", l);
r.select();
자세한 내용은 SitePoint , AspAlliance의이 기사에 있습니다 .
다른 사람이 말했듯이 clear and fill이 나를 위해 일했습니다.
var elem = $('#input_field');
var val = elem.val();
elem.focus().val('').val(val);
나는 몇몇 사람들이 위에서 제안한 것과 같은 것을 발견했습니다. 당신이 경우 focus()먼저 다음을 누르면 val()입력에, 커서는 파이어 폭스, 크롬과 IE의 입력 값의 끝에 위치 얻을 것이다. 를 val()입력 필드에 먼저 밀어 넣으면 Firefox와 Chrome이 커서를 끝에 배치하지만 IE는 focus().
$('element_identifier').focus().val('some_value')
트릭을해야합니다 (어쨌든 항상 나를 위해).
처음에는 선택한 텍스트 상자 개체에 포커스를 설정하고 다음에는 값을 설정해야합니다.
$('#inputID').focus();
$('#inputID').val('someValue')
먼저 값을 설정하십시오. 그런 다음 초점을 설정하십시오. 초점을 맞출 때 초점 당시 존재하는 값을 사용하므로 먼저 값을 설정해야합니다.
이 논리 <input>는를 클릭 한 값으로 채우는 응용 프로그램과 함께 작동합니다 <button>. val()먼저 설정됩니다. 그때focus()
$('button').on('click','',function(){
var value = $(this).attr('value');
$('input[name=item1]').val(value);
$('input[name=item1]').focus();
});
다음은 값을 재지 정하지 않는 하나의 라이너입니다.
$("#inp").focus()[0].setSelectionRange(99999, 99999);
function focusCampo(id){
var inputField = document.getElementById(id);
if (inputField != null && inputField.value.length != 0){
if (inputField.createTextRange){
var FieldRange = inputField.createTextRange();
FieldRange.moveStart('character',inputField.value.length);
FieldRange.collapse();
FieldRange.select();
}else if (inputField.selectionStart || inputField.selectionStart == '0') {
var elemLen = inputField.value.length;
inputField.selectionStart = elemLen;
inputField.selectionEnd = elemLen;
inputField.focus();
}
}else{
inputField.focus();
}
}
$('#urlCompany').focus(focusCampo('urlCompany'));
모든 즉 브라우저에서 작동합니다 ..
function CurFocus()
{
$('.txtEmail').focus();
}
function pageLoad()
{
setTimeout(CurFocus(),3000);
}
window.onload = pageLoad;
Scorpion9의 답변이 작동합니다. 더 명확하게하기 위해 아래 코드를 참조하십시오.
<script src="~/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var input = $("#SomeId");
input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);
});
</script>
'IT' 카테고리의 다른 글
| osx mavericks에 "gem install therubyracer -v '0.10.2'"가 설치되지 않았습니다. (0) | 2020.09.04 |
|---|---|
| TypeError : ObjectId ( '')는 JSON 화 가능하지 않습니다. (0) | 2020.09.04 |
| 데이터 리더에서 데이터 테이블 채우기 (0) | 2020.09.04 |
| 한 줄에있는 단어 사이에 둘 이상의 공백이있는 항목을 검색하는 방법 (0) | 2020.09.03 |
| 외모 전환을 시작 / 종료하기위한 불균형 통화 (0) | 2020.09.03 |