jquery 입력 모두 포커스 선택
사용자가 필드에 집중할 때 필드의 모든 텍스트를 선택하기 위해 이 코드를 사용합니다.잠시 동안 모두 선택한 다음 선택되지 않고 입력 커서가 왼쪽으로 이동합니다.
$("input[type=text]").focus(function() {
$(this).select();
});
모두 선택된 상태로 유지하기를 원합니다.
사용해 보십시오.click에 focus마우스 및 주요 이벤트(최소한 Chrome/Mac에서) 모두 작동하는 것 같습니다.
jQuery < 버전 1.7:
$("input[type='text']").click(function () {
$(this).select();
});
jQuery 버전 1.7+:
$("input[type='text']").on("click", function () {
$(this).select();
});
저는 이렇게 생각합니다.
focus()
UI tasks related to pre-focus
callbacks
select()
UI tasks related to focus (which unselect again)
해결 방법은 포커스() 후에 완전히 실행되도록 select()를 비동기식으로 호출하는 것일 수 있습니다.
$("input[type=text]").focus(function() {
var save_this = $(this);
window.setTimeout (function(){
save_this.select();
},100);
});
이것이 더 나은 해결책이라고 생각합니다.단순히 클릭 이벤트를 선택하는 것과 달리 마우스로 텍스트를 선택/편집하는 것을 방해하지 않습니다.IE8을 포함한 주요 렌더링 엔진과 연동됩니다.
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
여기 괜찮은 답변들이 있고 @user2072367의 것이 제가 좋아하는 것인데 클릭이 아닌 탭으로 초점을 맞추면 예상치 못한 결과가 나옵니다. (예상치 못한 결과: 탭으로 초점을 맞춘 후 정상적으로 텍스트를 선택하려면 한 번 더 클릭해야 합니다.)
이 피들은 중복 DOM 선택을 방지하기 위해 작은 버그를 수정하고 변수에 $(이) 추가로 저장합니다.확인해 보세요! (:
IE > 8에서 테스트됨
$('input').on('focus', function() {
var $this = $(this)
.one('mouseup.mouseupSelect', function() {
$this.select();
return false;
})
.one('mousedown', function() {
// compensate for untriggered 'mouseup' caused by focus via tab
$this.off('mouseup.mouseupSelect');
})
.select();
});
신중하게 검토한 후, 저는 이 스레드 내에서 훨씬 더 깨끗한 솔루션을 제안합니다.
$("input").focus(function(){
$(this).on("click.a keyup.a", function(e){
$(this).off("click.a keyup.a").select();
});
});
jsFiddle 데모
문제:
여기 약간의 설명이 있습니다.
먼저 필드에 마우스를 넣거나 탭을 눌렀을 때의 이벤트 순서를 살펴보겠습니다.
다음과 같은 모든 관련 이벤트를 기록할 수 있습니다.
$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
function(e) { console.log(e.type); });
참고: 이 솔루션을 사용하도록 변경했습니다.
clickmouseup하고 @에서 몇 하는 것처럼 .
일부 브라우저는 다음 시간 동안 커서를 배치하려고 시도합니다.mouseup또는click한하고 끌어서 일부 강조 수도 있기 때문에 가 있습니다.캐럿을 한 위치에서 시작하고 끌어서 일부 텍스트를 강조 표시할 수도 있으므로 이 방법이 적합합니다.마우스를 실제로 들어올릴 때까지 캐럿 위치를 지정할 수 없습니다. 래서처리기능은을 focus너무 일찍 응답하여 브라우저가 사용자의 위치를 무시할 수 있습니다.
하지만 문제는 우리가 정말로 초점 사건을 다루고 싶어한다는 것입니다.이것은 누군가가 현장에 처음 들어왔을 때 우리에게 알려줍니다.이 시점 이후에는 사용자 선택 동작을 계속 재정의하지 않습니다.
솔루션:
신에대 에서 서내.focus 핸들러,할 수 .click 인)및 (클릭 인) »keyup불이 날 것 같은 사건들
참고: 탭 이벤트의 키업은 실제로 이전 입력 필드가 아닌 새 입력 필드에서 실행됩니다.
이벤트를 한 번만 실행합니다.우리는 사용할 수 있습니다..one("click keyup)각 이벤트 유형에 대해 이벤트 처리기를 한 번 호출합니다.대신 마우스를 올리거나 키를 올리는 즉시 기능을 호출합니다.우리가 가장 먼저 할 일은 두 가지 모두에 대한 핸들러를 제거하는 것입니다.그래야 우리가 탭을 하든 말든 상관없습니다.함수는 정확히 한 번 실행되어야 합니다.
참고: 대부분의 브라우저는 탭 이벤트 동안 자연스럽게 모든 텍스트를 선택하지만, 애니메이션 gif가 지적했듯이, 우리는 여전히 처리하기를 원합니다.
keyup이벤트, 그렇지 않으면mouseup우리가 언제든 사건은 여전히 남아있을 것입니다.우리는 두 가지를 모두 듣기 때문에 선택을 처리하는 즉시 청취자를 끌 수 있습니다.
이제, 우리는 전화할 수 있습니다.select()브라우저가 선택한 후 기본 동작을 재정의합니다.
마지막으로 추가적인 보호를 위해 이벤트 이름 공간을mouseup그리고.keyup기능들이 그래서.off()메소드는 재생 중인 다른 수신기를 제거하지 않습니다.
IE 10+, FF 28+ 및 Chrome 35+에서 테스트됨
또는 이벤트 수에 따라 정확히 한 번 실행되는 함수를 사용하여 jQuery를 확장하려는 경우:
$.fn.once = function (events, callback) {
return this.each(function () {
var myCallback = function (e) {
callback.call(this, e);
$(this).off(events, myCallback);
};
$(this).on(events, myCallback);
});
};
그런 다음 코드를 다음과 같이 더욱 단순화할 수 있습니다.
$("input").focus(function(){
$(this).once("click keyup", function(e){
$(this).select();
});
});
바이올린 데모
이렇게 하면 마우스로 텍스트의 일부를 더 이상 선택할 수 없는 문제를 피할 수 있습니다.
$("input[type=text]").click(function() {
if(!$(this).hasClass("selected")) {
$(this).select();
$(this).addClass("selected");
}
});
$("input[type=text]").blur(function() {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
}
});
이러한 솔루션의 대부분의 문제는 입력 필드 내에서 커서 위치를 변경할 때 올바르게 작동하지 않는다는 것입니다.
그onmouseup하며, 이는 이벤트 " " " " 다음에 됩니다. " " 는 필드 내의 커서 위치를 변경합니다.onfocus(Chrome 및 FF 내 ).만약 당신이 무조건 버리면,mouseup그러면 사용자가 마우스로 커서 위치를 변경할 수 없습니다.
function selectOnFocus(input) {
input.each(function (index, elem) {
var jelem = $(elem);
var ignoreNextMouseUp = false;
jelem.mousedown(function () {
if (document.activeElement !== elem) {
ignoreNextMouseUp = true;
}
});
jelem.mouseup(function (ev) {
if (ignoreNextMouseUp) {
ev.preventDefault();
ignoreNextMouseUp = false;
}
});
jelem.focus(function () {
jelem.select();
});
});
}
selectOnFocus($("#myInputElement"));
이 코드는 조건부로 다음을 방지합니다.mouseup필드에 현재 포커스가 없는 경우 기본 동작.다음과 같은 경우에 사용할 수 있습니다.
- 필드에 포커스가 없을 때 클릭
- 필드에 포커스가 있을 때 클릭
- 필드에 탭핑하기
Chrome 31, FF 26, IE 11에서 테스트했습니다.
이 버전은 ios에서 작동하며 Windows Chrome에서 표준 끌어서 선택할 수 있도록 수정합니다.
var srcEvent = null;
$("input[type=text],input[type=number]")
.mousedown(function (event) {
srcEvent = event;
})
.mouseup(function (event) {
var delta = Math.abs(event.clientX - srcEvent.clientX)
+ Math.abs(event.clientY - srcEvent.clientY);
var threshold = 2;
if (delta <= threshold) {
try {
// ios likes this but windows-chrome does not on number fields
$(this)[0].selectionStart = 0;
$(this)[0].selectionEnd = 1000;
} catch (e) {
// windows-chrome likes this
$(this).select();
}
}
});
$(function(){
jQuery.selectText('input:text');
jQuery.selectText('input:password');
});
jQuery.extend( {
selectText: function(s) {
$(s).live('focus',function() {
var self = $(this);
setTimeout(function() {self.select();}, 0);
});
}
});
저는 2016년 말에 올 예정이며 이 코드는 최근 버전의 jquery(이 경우 jquery-2.1.3.js)에서만 작동합니다.
if ($(element).is("input")) {
$(element).focus(function () {
$(element).select();
});
}
항상 사용합니다.requestAnimationFrame()이벤트 후 내부 메커니즘을 뛰어넘기 위해 Firefox에서 완벽하게 작동합니다.Chrome에서 테스트하지 않았습니다.
$("input[type=text]").on('focus', function() {
requestAnimationFrame(() => $(this).select());
});
FF 16.0.2와 jquery 1.8.3을 사용하여 답변의 모든 코드가 작동하지 않았습니다.
저는 이런 코드를 사용해서 일을 합니다.
$("input[type=text]").focus().select();
또는 그냥 사용할 수 있습니다.<input onclick="select()">완벽하게 작동합니다.
var timeOutSelect;
$("input[type=text]").focus(function() {
var save_this = $(this);
clearTimeout(timeOutSelect);
timeOutSelect = window.setTimeout (function(){
save_this.select();
}, 100);
});
두 입력 사이를 빠르게 전환하는 경우 더 많은 보안을 위해 clearTimeout을 사용합니다.시간 초과를 지웁니다. 이전 시간 초과를 지웁니다...
간단한 코드를 사용할 수 있습니다.
$('#idname').select();
JavaScript인 와 잘 연동됩니다.select().
$("input[type=text]").focus(function(event) {
event.currentTarget.select();
});
또는 일반적으로:
$("input[type=text]")[0].select()
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>
언급URL : https://stackoverflow.com/questions/3150275/jquery-input-select-all-on-focus
'programing' 카테고리의 다른 글
| 중지: 알 수 없는 인스턴스 mongodb(Ubuntu) (0) | 2023.07.12 |
|---|---|
| Visual Studio 2013의 애플리케이션에서 Application Insight 제거 (0) | 2023.07.12 |
| IS NULL과 =SDD 사이에 차이가 있습니까? (0) | 2023.07.12 |
| vba를 사용하여 웹 사이트에서 데이터 스크랩 (0) | 2023.07.12 |
| 커밋되지 않은 변경사항을 새 분기로 이동 (0) | 2023.07.12 |