STUDY/javascript

textarea placeholder 줄바꿈

수밤바 2019. 7. 5. 11:59
728x90

기본적으로 placeholder는 줄바꿈이 되지 않음.

data 요소에 내용을 넣어(data-placeholder) 동적으로 넣어줌

 

지인에게 받은 placeholder 줄바꿈 코드가 있었는데

textarea가 1개일때는 유용하게 사용할것 같다.

하지만 내 작업물에는 3개이상 사용해야해서 약간 수정 했다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('textarea').each(function () {
    var $this = $(this);
    if ($this.attr('data-placeholder'== undefined) 
        return;
    
    var placeholder = $this.attr('data-placeholder');
    $this.after('<span class="guideTxt">' + placeholder + '</span>');
    $this.keyup(function () {
        if ($this.val().length > 0
            $this.next('.guideTxt').hide();
         else if ($this.val().length == 0
            $this.next('.guideTxt').show();
        
    })
})
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter

HTML :

<textarea class="ipt_text" data-placeholder="학력을 입력해주세요.<br>ex)<br>OO대학교 졸업<br>OO대학원<br>OO기업" rows="5"></textarea>

 

 

placeholder 줄바꿈이 필요한 textarea에 data-placeholder 내용을 입력

줄바꿈은 <br>로 넣어주고

script에서 data-placeholder가 있는 요소만 찾아내서(6번라인) 동적으로 .guideTxt에 넣어준다.

 

다른 기본 placeholder 기능처럼 필드에 타이핑이 시작되면 동적으로 넣으준 span도 가려지고 내용이 없을때 다시 나타난다.

 

 

 

 

>>> 190604 수정

 

필드에 미리 메모장에 써 놓은 내용을 붙여넣기 했을때 가이드 문구가 사라지지 않는 오류 수정

붙여넣기 테스트중 잘라내기도 문제있음 확인

 

jquery event중 paste, cut 사용

cut 이벤트가 실행될때 두가지 경우가 있다

  1. 텍스트 일부를 잘라내는 경우

  2. 전체선택후 잘라내기

 

일부만 잘라내기일 경우 글자가 남아있기 때문에 length>0 이며 가이드 문구가 나오면 안되고

전체 선택후 잘라내기 일때 length가 0이며 가이드 문구를 보여주면 된다.

 

1
2
if ($this.val().length>0) $this.next('.guideTxt').hide();
else if ($this.val().length==0) $this.next('.guideTxt').show();

 

하지만 실행 했을때 length가 cut이벤트가 싱행되기 전 length를 기억하지뭐야...

그래서 setTimeout을 사용 시간은 0으로 해도 제대로 동작했다.

1
2
3
4
5
6
7
8
9
10
11
12
$this.bind('paste'function () {
    $this.next('.guideTxt').hide()
})
$this.bind('cut'function () {
    setTimeout(function () {
        if ($this.val().length > 0
            $this.next('.guideTxt').hide();
         else if ($this.val().length == 0
            $this.next('.guideTxt').show();
        
    }, 0)
})
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter