기타/기타 잡다한 것들

[자바스크립트] 텍스트 불러와서 이벤트 처리해서 출력

제주도소년 2018. 7. 31. 22:40
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function previewString()
{
 var objResult = document.getElementById("result");
 var objText = document.getElementById("tbString");
 var objFontColor = document.getElementById("fontColor");
 var objFontSize = document.getElementById("fontSize");
 var objOptions = document.getElementsByName("fontOptions");
 
 var targetString = objText.value;
 targetString = targetString.fontcolor(objFontColor.options[objFontColor.selectedIndex]
 .value);
 
 targetString = targetString.fontsize(objFontSize.options[objFontSize.selectedIndex]
 .value);
 
 if(objOptions[0].checked)
 {
  targetString = targetString.strike();
 }
 
 if(objOptions[1].checked)
 {
  targetString = targetString.big();
 }
 
 if(objOptions[2].checked)
 {
  targetString = targetString.small();
 }
 if(objOptions[3].checked)
 {
   targetString = targetString.bold();
 }
 if(objOptions[4].checked)
 {
   targetString = targetString.italics();
 }
 if(objOptions[5].checked)
 {
   targetString = targetString.sup();
 }
 if(objOptions[6].checked)
 {
   targetString = targetString.sub();
 }
 if(objOptions[7].checked)
 {
   targetString = targetString.toLowerCase();
 }
 if(objOptions[8].checked)
 {
   targetString = targetString.toUpperCase();
 }
 objResult.innerHTML = targetString;
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
 
<input type="text" size=20 id="tbString">&nbsp
<input type="button" value="미리보기" onclick="previewString()"><br>
색상:
<select id="fontColor">
 <option value="red">빨강</option>
 <option value="blue">파랑</option>
 <option value="yellow">노랑</option>
</select><br>
 
크기:
<select id="fontSize">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
</select>
<br>
<input type="checkbox" name="fontOptions" value="취소선">취소선&nbsp
<input type="checkbox" name="fontOptions" value="크게" >크게&nbsp
<input type="checkbox" name="fontOptions" value="작게" >작게&nbsp
<input type="checkbox" name="fontOptions" value="두껍게" >두껍게&nbsp
<input type="checkbox" name="fontOptions" value="기울임" >기울임&nbsp
<br>
<input type="checkbox" name="fontOptions" value="위첨자">위첨자&nbsp
<input type="checkbox" name="fontOptions" value="아래첨자" >아래첨자&nbsp
<input type="checkbox" name="fontOptions" value="소문자로" >소문자로&nbsp
<input type="checkbox" name="fontOptions" value="대문자로" >대문자로&nbsp
<br><br><hr>
 
<span id="result"></span>
 
</body>
 
 cs

 

 

 

저작자표시 비영리 동일조건

'기타 > 기타 잡다한 것들' 카테고리의 다른 글

[자바스크립트] 회원가입 유효성검사  (0) 2018.08.01
[자바스크립트] 자주쓰는 정규 표현식  (0) 2018.08.01
[HTML] 테이블과 INPUT 태그 연습  (0) 2018.07.31
[안드로이드]하나의 객체로 여러 개의 버튼 처리하기 (익명클래스 사용)  (0) 2018.07.31
[안드로이드] xml 에서 버튼을 정의하고 자바코드에서 버튼 처리  (0) 2018.07.26

'기타/기타 잡다한 것들'의 다른글

  • 현재글[자바스크립트] 텍스트 불러와서 이벤트 처리해서 출력

관련글

티스토리툴바