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);
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();
참조: @will824 Comment, 이 솔루션은 호환성 문제 없이 저에게 효과가 있었습니다.나머지 솔루션은 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
한 줄로 하면 어떨까요?
$('#txtSample').focus().val($('#txtSample').val());
이 선은 저에게 적합합니다.
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());
이 답이 늦게 오는 건 알지만, 사람들이 답을 찾지 못하고 있다는 걸 알 수 있습니다.시작할 때 커서를 놓을 위 키를 막으려면, 그냥,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();
}
}
}
브라우저마다 다릅니다.
이 기능은 다음과 같습니다.
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();
자세한 내용은 여기 사이트포인트, AsAlliance에서 확인하실 수 있습니다.
다른 사람들이 말한 것처럼, 나에게는 클리어 앤 필이 효과가 있었습니다.
var elem = $('#input_field');
var val = elem.val();
elem.focus().val('').val(val);
값을 먼저 설정합니다.초점을 맞추세요.초점을 맞출 때는 초점을 맞출 때 존재하는 값을 사용하기 때문에 값을 먼저 설정해야 합니다.
는 는 가 에게 가 는 에게 .<input>
한의 <button>
.val()
먼저 설정됩니다.그리고나서focus()
$('button').on('click','',function(){
var value = $(this).attr('value');
$('input[name=item1]').val(value);
$('input[name=item1]').focus();
});
저는 몇몇 사람들이 위에 제안한 것과 같은 것을 발견했습니다.네가 만약focus()
저,그를다.val()
입력에 커서는 Firefox, Chrome 및 IE에서 입력 값의 끝에 위치하게 됩니다..val()
먼저 입력 필드에 들어가면 Firefox와 Chrome은 커서를 끝에 놓지만 IE는 당신이 그것을 앞에 놓습니다.focus()
.
$('element_identifier').focus().val('some_value')
(어쨌든 나에게는 항상 있는 일입니다.)
처음에는 선택한 텍스트 상자 개체에 초점을 맞추고 다음에는 값을 설정해야 합니다.
$('#inputID').focus();
$('#inputID').val('someValue')
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'));
allie 브라우저에서 작동합니다.
다음은 값을 재할당하지 않는 원 라이너입니다.
$("#inp").focus()[0].setSelectionRange(99999, 99999);
function CurFocus()
{
$('.txtEmail').focus();
}
function pageLoad()
{
setTimeout(CurFocus(),3000);
}
window.onload = pageLoad;
스콜피온9의 답이 통합니다.좀 더 확실히 하기 위해 아래의 제 코드를 참조해 주십시오.
<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>
var prevInputVal = $('#input_id').val();
$('#input_id').val('').focus().val(prevInputVal)
입력된 이전값을 변수에 저장합니다 -> 빈 입력값 -> 포커스 입력 -> 원래값 재할당 SIMPLE!
마우스 포인트로 초점을 맞출 것입니다.
$("#TextBox").포커스(focus);
언급URL : https://stackoverflow.com/questions/1056359/set-mouse-focus-and-move-cursor-to-end-of-input-using-jquery
'programing' 카테고리의 다른 글
Woocommerce의 특정 제품 카테고리에 대한 사용자 정의 단일 제품 템플릿 사용 (0) | 2023.09.14 |
---|---|
Oracle CLOB 성능 (0) | 2023.09.14 |
파이어폭스는 테이블 요소에 상대적인 위치를 지원합니까? (0) | 2023.09.14 |
jQuery.jaxSetup에 설정된 특정 요청 헤더를 제거합니다. (0) | 2023.09.14 |
MySQL의 Varbinary 대 Blob (0) | 2023.09.14 |