기본적으로 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);
return;
$this.keyup(function () {
$this.next('.guideTxt').hide();
$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
|
|
하지만 실행 했을때 length가 cut이벤트가 싱행되기 전 length를 기억하지뭐야...
그래서 setTimeout을 사용 시간은 0으로 해도 제대로 동작했다.
1
2
3
4
5
6
7
8
9
10
11
12
|
$this.next('.guideTxt').hide()
})
setTimeout(function () {
$this.next('.guideTxt').hide();
$this.next('.guideTxt').show();
}, 0)
})
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
'STUDY > javascript' 카테고리의 다른 글
스와이프메뉴 클릭하면 가운데오기 (21) | 2019.07.25 |
---|---|
textarea 높이 측정 (0) | 2019.07.05 |
모바일 레이어 백버튼으로 닫기 (0) | 2018.09.19 |
오류시 다른코드에 영향없게 (0) | 2017.06.28 |
콜바이밸류 콜바이레퍼런스 Call by Value, Call by Reference (0) | 2014.07.30 |