input, textarea 클릭 시 자동 드래그, 자동 선택

input 클릭 시 자동 드래그

input 클릭 시 자동 드래그
개발할 때 보면 가끔 해주고 싶을 때가 있는 기능입니다.

 

input 태그에 직접 입력

input, textarea 태그에 직접 입력하는 방법입니다.
onfocus="this.select()"를 필요한 input에 넣어 주면 됩니다.

<input type="text" id="txtstr" name="txtstr" onfocus="this.select()" value="문자선택">
<textarea id="txtarea" name="txtarea" rows="4" cols="50" onfocus="this.select()">1라인</textarea>

 

jquery를 이용 모두 한 번에

현재 페이지 모두에 입력하는 방법입니다.
jquery로 페이지 로딩 완료 후 아래처럼 처리해 주시면 됩니다.

$(function(){
	
    //input, textarea 모두 자동 드래그 처리 합니다.
	$('input,textarea').on('focus', function() {
        $(this).select();
    });

});

 

jquery를 이용 모두 원하는 input

드래그 처리 원하는 input, textarea를 id로 별로 입력하여 드래그 동작이 되도록 처리합니다.

<input type="text" id="txt1" name="txt2" value="문자선택">
<textarea id="area1" name="area1" rows="4" cols="50" >
11라인
22라인
33라인
</textarea>

<input type="text" id="txt2" name="txt2" value="문자선택">
<textarea id="area2" name="area" rows="4" cols="50" >
11라인
22라인
33라인
</textarea>

$(function(){
	
    // 드래그 원하는(input, textarea)의 아이디를 입력 하여 id를 ','구분하여 입력 합니다.
    $('#txt2,#area2').on('focus', function() {
        $(this).select();
    });
	
});

 

 

 

input 실행

 

 

textarea 실행

 

11라인 22라인 33라인