Xử dụng onchange và select onchange.
onchange là event handler (The event handler is triggered when the
specified event occurs ) và cũng là attribute có syntax như sau.
onchange=” script command “
Script command là javaScript code, javaScript function, javaScript statement,
javaScript program dùng để call function hay parse value.
onchange được xử dụng cho input, select , textarea , iframe và div.
Thí dụ xử dụng onchange và select onchange.
1- Dùng onchange làm thay đổi những gì viết trong input.
Thay
đổi chữ viết trong box rồi click ở ngoài box .Window pop up sẽ
xuất
hiện cho biết bạn đã viết chữ gì thay cho chữ Hello Friends.
<input type="text" value="Hello Friends"
onchange="alert(this.value)">
<hr>
<input type="text" id="txt" value="Hello Friends"
onchange=alert(document.getElementById('txt').value);>
2- Dùng onchange cho 2 commands cách biệt bằng dấu chấm phẩy.
<input type="text" onChange =
“ alert( ' Cám ơn bạn muốn tham gia.' );
confirm( 'Bạn có muốn tiếp tục mở xem không?' );">
3- Dùng onchange để parse một value.
<input type="text" onChange="
if (parseInt(this.value) <= 10) {
alert('Please enter a number greater than 10.');}">
4- Dùng onchange để call function .Thí dụ function nầy sẽ báo cho
biết khi nào trong textarea có sự thay đổi.
<html >
<body>
<script>
function changeText(){
alert("Đã có thay đổi trong textarea...");}
</script>
<textarea rows="5" cols="50" onchange ='changeText()'></textarea>
</body>
</html>
5- Dùng select onchange cho droplist. Trong droplist có nhiều option values..Khi chọn xong value thì onchange mới vận hành để call function.
5-1-Thí dụ nầy function display() sẽ viết option value đã chọn vào trong
div tag khi onchange vận hành.
<html>
<body>
<script>
function display() {
document.getElementById("txt").innerHTML=document.getElementById("mySelect").value}
</script>
<select id="mySelect" onchange="display();">
<option value=" ">select</option>
<option value="Bread">Bread</option>
<option value="Cafe">Cafe</option>
<option value="Green Tea">Green Tea</option></select>
<div id="txt" style="width: 200px; height: 100px;
border: 1px solid red; text-align:left; padding:5px;font-family:arial;font-size:20px"></div>
</body>
</html>
5-2 – Dùng select onchange thay đổi background color
<html>
<body>
<script>
function change(a) {
var col = a.options[a.selectedIndex].value;
if (col) { document.bgColor = col; }
alert("The background color changes to "+ col) }
</script>
<body>
<select id="color" onchange="change(this)">
<option value=” " >select</option>
<option value="cyan">Cyan</option>
<option value="tan">Tan</option>
<option value="purple">Purple</option></select>
</body></html>
Chữ this đi với parameter a. Vì muốn display value nên nối kết value với selectedIndex.
Nếu chỉ muốn display số thứ tự 1, 2, 3 … thì viết.
var col = a.selectedIndex
6- Dùng select onchange
đơn độc không cần phải có javaScript function.
Áp
dụng phương pháp nầy để thay đổi màu sắc , độ lớn, kiểu chữ viết
của từng chữ một hay từng câu theo ý muốn mà không gây ảnh hưởng đến
các chữ khác.
6-1-Thí dụ nầy giúp
chúng ta biết cách thay đổi màu sắc của chữ.
<html>
<body>
<select onchange=
'document.execCommand("ForeColor",0,this.options[this.selectedIndex].text)'>
<option
style="color:black;"value="black">black</option>
<option style="color:red;"
value="red">red</option>
<option style="color:blue;" value="blue">blue</option>
<option style="color:green;"
value="green">green</option></select>
<div contenteditable ="true" style="width:200px;height:100px;
border:1px solid
red;text-align:left;padding:5px;font-family:arial;
font-size:20px"></div>
</body>
</html>
this.options : đưa
tới các options trong select tag.
this.selectedIndex : đưa
tới index của selected item.
Nếu chúng ta muốn chọn 1st
item thì viết this.selectedIndex=0.
value : là
value của option. Nếu áp dụng cho text thì thay chữ
value bằng chữ text
Khi dùng document.execCommand()
thì trong div tag phải viết thêm
contenteditable="true" mới ok.
6-2- Thi dụ nầy cho biết
cách thay đổi các kiểu của từng chữ.
<html><body>
<select onchange=
'document.execCommand("FontName",0,this.options[this.selectedIndex].value)'
<option
value="">select</option>
<option
value="Arial">Arial</option>
<option>Times</option>
<option
value="Courier">Courier</option>
<option value="Comic Sans
MS">Comic Sans MS</option></select>
<div contenteditable="true" style="width:200px; height:100px;
border:
1px solid red; text-align:left;font-family:arial;padding:5px;
font-size:20px"></div>
</body></html>
6-3- Thí dụ
nầy làm thay đổi màu của tất cả những gì viết trong textarea.
Không cần làm highlite.
<html><body>
<select onchange="editor.style.color=
this.value;">
<option
style="color:black">black</option>
<option
style="color:blue">blue</option>
<option
style="color:red">red</option>
<option style="color:green">green</option>
</select><br/>
<textarea id="editor" cols="20"
rows="5"style="border-color:red;
font-family:arial;font-size:20px;text-align:left;
padding:5px; margin-top:3px">
</textarea>
</body></html>
6- 4 - Thí dụ
nầy làm thay đổi màu của tất cả những gì viết trong div tag.
Không cần làm
highlite nhưng phải viết contenteditable= “true” trong
div tag
mới OK.
<html><body>
<select onchange="editor.style.color=
this.value;">
<option
style="color:black">black</option>
<option
style="color:blue">blue</option>
<option
style="color:red">red</option>
<option
style="color:green">green</option>
</select><br/>
<div id="editor" contentEditable="true"
style="width:200px;height:100px;
border:solid
1px; font-family:times new roman; font-size:20px;text-align:left;
padding:5px;
margin-top:3px">
</div>
</body></html>
6-5 -Thí
dụ nầy cho biết cách chọn những trang html
Value là những trang mà chúng ta đã save với dạng html.
Những trang html nầy gồm có bài viết, hình vẽ cố
định và hình vẽ di động
<form>
<select
Onchange="location=this.options[this.selectedIndex].value;">
<option value="">select
<option value="canvas.html">Hình vẽ
<option value="dinhchuan.html">Nhân Viên Định chuẩn
<option value="svg.html">Cá đang bơi lội
</select></form>
Xử dụng document.execCommand( )
· Chỉ cho kết quả nếu viết ở ngoài div tag.
· Nếu muốn viết trong div tag thì không có kết quả vì nó ăn cắp focus.Để tránh khuyết điểm nầy chúng ta phải viết thêm trong div tag như sau.
<div onmousedown="event.preventDefault();"
onclick="document.execCommand('italic',false,null);">Italic</div>
Thí dụ.
<html>
<body>
<button onclick="document.execCommand('italic',false,null);">Italic</button>
<div onmousedown="event.preventDefault();"
onclick="document.execCommand('italic',false,null);">Italic</div>
<div id="editor" contentEditable="true" style="width:200px; height:100px;
border:solid 1px; font-family:times new roman; font-size:20px;text-align:left;padding:5px;
overflow:auto; margin-top:3px"> Highlite chữ viết và click Italic
</div>
</body>
</html>
