반응형
텍스트 상자의 마지막 문자 뒤에 포커스 설정
전화 번호 입력란이 3 개 있습니다. 사용자가 입력하면 한 텍스트 상자에서 다음 텍스트 상자로 자동으로 이동합니다. 사용자가 백 스페이스 키를 누르면 이전 텍스트 상자로 포커스를 이동할 수 있습니다. 문제는 IE에서 포커스가 텍스트 상자의 시작 부분에 설정되어 있다는 것입니다. 다음은 크롬에서 잘 작동하는 코드입니다.
$('#AreaCode').live('keyup', function (event) {
if ($(this).val().length == $(this).attr("maxlength"))
$('#Prefix').focus();
});
$('#Prefix').live('keyup', function (event) {
if (event.keyCode == 8 && $(this).val().length == 0)
$('#AreaCode').focus();
if ($(this).val().length == $(this).attr("maxlength"))
$('#Number').focus();
});
$('#Number').live('keyup', function (event) {
if (event.keyCode == 8 && $(this).val().length == 0)
$('#Prefix').focus();
});
뒤로 이동할 때 콘텐츠 끝에 포커스를 설정하려면 어떻게해야합니까?
이것은 그것을하는 쉬운 방법입니다. 뒤로 가려면 $("#Prefix").val($("#Prefix").val());초점을 맞춘 후 추가 하세요.
이것이 더 적절한 (더 깨끗한) 방법입니다.
function SetCaretAtEnd(elem) {
var elemLen = elem.value.length;
// For IE Only
if (document.selection) {
// Set focus
elem.focus();
// Use IE Ranges
var oSel = document.selection.createRange();
// Reset position to 0 & then set at end
oSel.moveStart('character', -elemLen);
oSel.moveStart('character', elemLen);
oSel.moveEnd('character', 0);
oSel.select();
}
else if (elem.selectionStart || elem.selectionStart == '0') {
// Firefox/Chrome
elem.selectionStart = elemLen;
elem.selectionEnd = elemLen;
elem.focus();
} // if
} // SetCaretAtEnd()
나는 많은 다른 솔루션을 시도했는데, 나를 위해 일한 유일한 솔루션은이 페이지에서 Chris G의 솔루션을 기반으로 한 것입니다 (그러나 약간 수정).
나는 그것을 필요로하는 모든 사람들이 나중에 사용할 수 있도록 jQuery 플러그인으로 바 꾸었습니다.
(function($){
$.fn.setCursorToTextEnd = function() {
var $initialVal = this.val();
this.val($initialVal);
};
})(jQuery);
사용 예 :
$('#myTextbox').setCursorToTextEnd();
이것은 나를 위해 잘 작동합니다. [참고 : Gavin G의 멋진 플러그인]
(function($){
$.fn.focusTextToEnd = function(){
this.focus();
var $thisVal = this.val();
this.val('').val($thisVal);
return this;
}
}(jQuery));
$('#mytext').focusTextToEnd();
이렇게 코딩해야합니다.
var num = $('#Number').val();
$('#Number').focus().val('').val(num);
모든 브라우저 용 코드 :
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();
}
}
다음과 같이 텍스트 상자의 마지막 위치에 포인터를 설정할 수 있습니다.
temp=$("#txtName").val();
$("#txtName").val('');
$("#txtName").val(temp);
$("#txtName").focus();
var val =$("#inputname").val();
$("#inputname").removeAttr('value').attr('value', val).focus();
// I think this is beter for all browsers...
입력 태그 내에서 이러한 간단한 자바 스크립트를 사용할 수 있습니다.
<input type="text" name="your_name" value="your_value"
onfocus="this.setSelectionRange(this.value.length, this.value.length);"
autofocus />
<script type="text/javascript">
$(function(){
$('#areaCode,#firstNum,#secNum').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
<body>
<input type="text" id="areaCode" name="areaCode" maxlength="3" value="" size="3" />-
<input type="text" id="firstNum" name="firstNum" maxlength="3" value="" size="3" />-
<input type="text" id="secNum" name=" secNum " maxlength="4" value="" size="4" />
</body>
참고 URL : https://stackoverflow.com/questions/4609405/set-focus-after-last-character-in-text-box
반응형
'programing' 카테고리의 다른 글
| web2py를 사용하는 사람이 있습니까? (0) | 2020.11.22 |
|---|---|
| html 버튼에 react-router 링크 감싸기 (0) | 2020.11.22 |
| Android : 완료 후 애니메이션 위치 재설정 (0) | 2020.11.22 |
| xcode에서 RGB 색상 만들기 (0) | 2020.11.22 |
| RecyclerView 스크롤 성능 (0) | 2020.11.22 |