本文檔中第一個錨的innerHTML
<body>
<a name="first">第一個錨</a><br />
<a name="second">第二個錨</a><br />
<a name="third">第三個錨</a><br />
<br />
本文檔中第一個錨的 InnerHTML 是：
<script type="text/javascript">
document.write(document.anchors[0].innerHTML)
</script>
點擊了哪個鼠標按鍵
script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2) {
alert("您點擊了鼠標右鍵！")
}
else if(btnNum==0) {
alert("您點擊了鼠標左鍵！")
}
else {
alert("您點擊了" + btnNum+ "號鍵，我不能確定它的名稱。");
}
}
</script>
</head>
<body οnmοusedοwn="whichButton(event)">
<p>請在文檔中點擊鼠標。一個消息框會提示出您點擊了哪個鼠標按鍵。</p>
</body>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body οnmοusedοwn="whichElement(event)">
<p>在文檔中點擊某個位置。消息框會提示出您所點擊的標籤的名稱。</p>
<h3>這是標題</h3>
<p>這是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body οnkeyup="whichButton(event)">
<p><b>註釋：</b>在測試這個例子時，要確保右側的框架獲得了焦點。</p>
<p>在鍵盤上按一個鍵。消息框會提示出該按鍵的 unicode。</p>
</body>
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 座標: " + x + ", Y 座標: " + y)
}
</script>
</head>
<body οnmοusedοwn="show_coords(event)">
<p>請在文檔中點擊。一個消息框會提示出鼠標指針的 x 和 y 座標。</p>
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body οnmοusedοwn="coordinates(event)">
<p>
在文檔中點擊某個位置。消息框會提示出指針相對於屏幕的 x 和 y 座標。
</p>
改變 action 屬性並提交表單
function changeAction()
{
var x=document.getElementById("myForm")
alert("Original action: " + x.action)
x.action="/htmldom/index.asp"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>
<form id="myForm" action="/i/eg_smile.gif">
名稱：<input type="text" value="米老鼠" />
<input type="button" οnclick="changeAction()" value="改變 action 屬性並提交表單" />
</form>
選定取消複選框
function check()
{ document.getElementById("myCheck").checked=true }
function uncheck()
{ document.getElementById("myCheck").checked=false }
</script>
</head>
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" οnclick="check()" value="選定複選框" />
<input type="button" οnclick="uncheck()" value="取消選定複選框" />
</form>
function createOrder()
{ coffee=document.forms[0].coffee
txt=""
for (i=0;i<coffee.length;++ i)
{ if (coffee[i].checked)
{ txt=txt + coffee[i].value + " 1" }
}
document.getElementById("order").value="您訂購的咖啡帶有： " + txt
}
</script>
</head>
<body>
<p>你喜歡怎麼喝咖啡？</p>
<form>
<input type="checkbox" name="coffee" value="奶油">加奶油<br />
<input type="checkbox" name="coffee" value="糖塊">加糖塊<br />
<br />
<input type="button" οnclick="createOrder()" value="發送訂單">
<br /><br />
<input type="text" id="order" size="50">
</form>
轉換爲大寫
function convertToUcase()
{ document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase() }
</script>
</head>
<body>
<form name="form1">
名：<input type="text" id="fname" size="20" />
<br /><br />
轉換爲大寫
<input type="checkBox" οnclick="if (this.checked) {convertToUcase()}">
</form>
設置焦點
function setFocus()
{ document.getElementById('text1').focus() }
<form>
<input type="text" id="text1" /> <br />
<input type="button" οnclick="setFocus()" value="設置焦點" />
使用單選按鈕的value屬性
<script type="text/javascript">
function check(browser)
{ document.getElementById("answer").value=browser }
</script>
</head> <body>
<p>您喜歡哪款瀏覽器？</p>
<form>
<input type="radio" name="browser" οnclick="check(this.value)" value="Firefox">Firefox<br />
<input type="radio" name="browser" οnclick="check(this.value)" value="Netscape">Netscape<br />
<input type="radio" name="browser" οnclick="check(this.value)" value="Opera">Opera<br />
<br />您喜歡的瀏覽器是：<input type="text" id="answer" size="20">
</form>
點擊重置按鈕就可以重置表單
function formReset()
{ document.getElementById("myForm").reset() }
</head>
<body>
<p>在下面的文本框中輸入一些文本，然後點擊重置按鈕就可以重置表單。
點提交按鈕提交表單</p>
<form id="myForm">
姓名：<input type="text" size="20"><br /> <br />
<input type="button" οnclick="formSubmit()" value="提交" >
<input type="button" οnclick="formReset()" value="重置">
</form>
function formSubmit()
{
document.getElementById("myForm").submit()
}
<form id="myForm" action="/i/eg_smile.gif" method="get">
名：<input type="text" name="firstname" size="20"><br /> <br />
<input type="button" οnclick="formSubmit()" value="提交">
選定文本框中的內容
function selText()
{ document.getElementById("myText").select() }
</head>
<form>
<input size="25" type="text" id="myText" value="選定我吧！">
<input type="button" value="選擇文本" οnclick="selText()">
</form>
表單中的下拉列表
function favBrowser()
{ var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</head> <body>
<form>
請選擇您喜歡的瀏覽器：
<select id="myList" οnchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option> <option>Opera</option>
</select>
<p>您喜歡的瀏覽器是：<input type="text" id="favorite" size="20"></p>
</form>
當達到文本域的最大字符數時跳到下一個域
function checkLen(x,y)
{ if (y.length==x.maxLength) {
var next=x.tabIndex
if (next<document.getElementById("myForm").length) {
document.getElementById("myForm").elements[next].focus()
}
}
}
</head> <body>
<p>這段腳本在達到文本框的最大長度時跳到下一個文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" οnkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" οnkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="4" οnkeyup="checkLen(this,this.value)">
</form>
下拉列表
function moveNumbers() {
var no=document.getElementById("no")
var option=no.options[no.selectedIndex].text
var txt=document.getElementById("result").value
txt=txt + option
document.getElementById("result").value=txt }
</head> <body>
<form>
請選擇數字：<br />
<select id="no">
<option>0</option> <option>1</option> <option>2</option>
</select>
<input type="button" οnclick="moveNumbers()" value="-->">
<input type="text" id="result" size="20">
</form>
更改兩個框架的源
function changeSource()
{ document.getElementById("frame1").src="/example/hdom/frame_c.html" }
</head> <body>
<iframe src="/example/hdom/frame_a.html" id="frame1"></iframe> <br /><br />
<input type="button" οnclick="changeSource()" value="改變兩個框架的 source">