已有天涯账号？
这里是所提的问题，您需要登录才能参与回答。
"天涯问答"是天涯社区旗下的问题分享平台。在这里您可以提问，回答感兴趣的问题，分享知识和经历，无论您在何时何地上线都可以访问，此平台完全免费，而且注册非常简单。
js confirm中的确认取消信息改成yes和no
js confirm中的确认取消信息改成yes和no
09-07-27 & 发布
1.警告对话框 &script& alert(&警告文字&) &/script& 2.确认对话框 &script& confirm(&确定或取消？&) &/script& 3.提示对话框 &script& prompt(&脚本提示说明&,&输入文字&) &/script& 提示：alert 方法无返回值；confirm 方法返回 true (当用户点击了对话框的&确 定&时)或 false (当用户点击了对话框的&取消&时)；prompt 方法返回用户在对话框的输入框内输入的值。4.弹出指定大小的页面弹出窗口的命令格式：window.open( 'URLStr', 'WindowName', 'Property');1.window.open命令用于在网页上弹出一个新窗口。2.URLStr：弹出窗口所显示的页面3.WindowName：弹出窗口的名称，可以任意指定，也可以用’’来代替4.Property：用于控制弹出窗口显示的属性，具体可控制的参数有：5.Toolbar：是否显示浏览器工具栏，yes为显示，no为不显示6.Location：是否显示游览器地址栏，yes为显示，no为不显示7.Directories：是否显示目录按钮，yes为显示，no为不显示8.Status：是否显示状态栏，yes为显示，no为不显示9.Menubar：是否显示菜单条，yes为显示，no为不显示10.Scrollbar：是否激活水平和垂直流动条，yes为显示，no为不显示11.Resizable：是否可以改变窗口大小，yes为显示，no为不显示12.Width：指定窗口的宽度，以像素为单位13.Height：指定窗口的高度，以像素为单位14.Left：指定窗口距屏幕左端的距离，以像素为单位15.Top：指定窗口距屏幕顶端的距离，以像素为单位16.screenX：等同于Left属性17.screenY：等同于Top属性例：window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')关闭用window.close();如果需要提示信息则用window.self.close();去掉提示信息用 window.opener=window.self.close();或者直接用window.close()应用1：如果在一个父页面通过触发js事件通过window.open打开一个子窗口，怎么通过子窗口刷新父窗口！window.opener.location.href=&order3.html&;这时，父窗口就会变为order3.html！应用2：如果一个链接上需要点击弹出一个对话框，而且无链接&a href=&#& onClick=&javascript:window.open('updateOrder1.html','选择审核员','height=240px,width=380px,Left=280px,Top=300px,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no,directories=no');&&1111&/a&注：window.open();所打开的窗口属于非模式对话框（modelless）对话框分为模式对话框（model）和非模式对话框（modelless）模式对话框：就是只能操作当前的对话框，无法激活上层窗口，直到用户对本窗口做出了响应。只有对话框关闭，上层窗口才能从等待的状态脱离出来，继续运行下去。像保存，打开等对话框就属于这种模式。（激活的窗口是指拥有输入焦点的窗口，它可以对用户的键盘和鼠标作出响应）非模式对话框：用户可以在不响应对话框的情形下，使上层窗口一直保持在激活状态下。制作Javascript弹出窗口技巧九则1、最基本的弹出窗口代码 其实代码非常简单： & SCRIPT LANGUAGE=&javascript&& & !-- window.open (&page.html&) -- & & /SCRIPT& 因为这是一段Javascript代码，所以它们应该放在& SCRIPT LANGUAGE=&javascript&&之间。 & !-- 和 --&是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。 window.open (&page.html&) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。 用单引号和双引号都可以，只是不要混用。 这一段代码可以加入HTML的任意位置，& head&和& /head&之间可以，& body&间& /body&也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。 也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。 2、设置后的弹出窗口 下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。 & SCRIPT LANGUAGE=&javascript&& & !-- window.open (&page.html&, &newwindow&, &height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no&) //写成一行 --& & /SCRIPT& 参数解释： & SCRIPT LANGUAGE=&javascript&& js脚本开始； window.open 弹出新窗口的命令； &page.html& 弹出窗口的文件名； &newwindow& 弹出窗口的名字（不是文件名），非必须，可用空&代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已?打开），yes为允许； & /SCRIPT& js脚本结束 3、用函数控制弹出窗口 下面是一个完整的代码： & html& & head& & script LANGUAGE=&JavaScript&& & !-- function openwin() { window.open (&page.html&, &newwindow&, &height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no&) //写成一行 } //--& & /script& & /head& & body onload=&openwin()&& ...任意的页面内容... & /body& & /html& 这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。 怎么调用呢？ 方法一：& body onload=&openwin()&& 浏览器读页面时弹出窗口； 方法二：& body onunload=&openwin()&& 浏览器离开页面时弹出窗口； 方法三：用一个连接调用：& a href=&#& onclick=&openwin()&&打开一个窗口& /a& 注意：使用的&#&是虚连接。 方法四：用一个按钮调用：& input type=&button& onclick=&openwin()& value=&打开窗口&& 4、同时弹出2个窗口 对源代码稍微改动一下： & script LANGUAGE=&JavaScript&& & !-- function openwin() { window.open (&page.html&, &newwindow&, &height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no&) //写成一行 window.open (&page2.html&, &newwindow2&, &height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no&) //写成一行 } //--& & /script& 为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。 注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？ 5、主窗口打开文件1.htm，同时弹出小窗口page.html 如下代码加入主窗口& head&区： & script language=&javascript&& & !-- function openwin() { window.open(&page.html&,&&,&width=200,height=200&) } //--& & /script& 加入& body&区： & a href=&1.htm& onclick=&openwin()&&open& /a&即可 6、弹出的窗口之定时关闭控制 下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？ 首先，将如下代码加入page.html文件的& head&区： & script language=&JavaScript&& function closeit() { setTimeout(&self.close()&,10000) //毫秒 } & /script& 然后，再用& body onload=&closeit()&& 这一句话代替page.html中?有的& BODY&这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。) 7、在弹出窗口中加上一个关闭按钮 & FORM& & INPUT TYPE=&BUTTON& VALUE=&关闭& onClick=&window.close()&& & /FORM& 呵呵，现在更加完美了！ 8、网页内包含的弹出窗口--一个页面两个窗口 上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。 & html& & head& & SCRIPT LANGUAGE=&JavaScript&& function openwin() { OpenWindow=window.open(&&, &newwin&, &height=250, width=250,toolbar=no,scrollbars=&+scroll+&,menubar=no&); //写成一行 OpenWindow.document.write(&& TITLE&例子& /TITLE&&) OpenWindow.document.write(&& BODY BGCOLOR=#ffffff&&) OpenWindow.document.write(&& h1&Hello!& /h1&&) OpenWindow.document.write(&New window opened!&) OpenWindow.document.write(&& /BODY&&) OpenWindow.document.write(&& /HTML&&) OpenWindow.document.close() } & /SCRIPT& & /head& & body& & a href=&#& onclick=&openwin()&&打开一个窗口& /a& & input type=&button& onclick=&openwin()& value=&打开窗口&& & /body& & /html& 看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。 9、终极应用--弹出的窗口之Cookie控制 回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁?过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-( 有解决的办法吗？当然有！我们使用cookie来控制一下就可以了。首先，将如下代码加入主页面HTML的& HEAD&区： & script& function openwin(){ window.open(&page.html&,&&,&width=200,height=200&) } function get_cookie(Name) { var search = Name + &=& var returnvalue = &&; if (document.cookie.length & 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(&;&, offset); if (end == -1) end = document.cookie. returnvalue=unescape(document.cookie.substring(offset, end)) } } } function loadpopup(){ if (get_cookie(&popped&)==&){ openwin() document.cookie=&popped=yes& } } & /script& 然后，用& body onload=&loadpopup()&&（注意不是openwin而是loadpop啊！）替换主页面中原有的& BODY&这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！
请登录后再发表评论!第 3 章 Alert、confirm 及 prompt
作者: 伍新華
Email: ng-sun-wah@graduate.hku.hk
對話盒 (dialog box)
是用來向觀看者顯示一些訊息, 通常用者要作出一些回應
(例如按對話盒中的 [確定] ), 才可繼續操作。
JavaScript 內有三類對話盒, alert、confirm及prompt,
分別使用以下三個 method:
window.alert( ) window.confirm( )
window.prompt( )
這三個都是屬於 window 的 method,
我們一般都會簡略為 alert( )、confirm( ) 及 prompt(
在本書前面的例子,
筆者都避免使用太多複雜的程式, 讓讀者有較多時間適應,
在這一章開始, 例子中會使用 function 及 if
statement, 讀者請開始參看第4、5、6、7章的程式理論。
Alert 對話盒
Alert (提示) 對話盒是一個訊息對話盒,
向觀看者顯示一些文字, 觀看者按 [確定]
就可繼續操作。
1. 直接出現的 alert 對話盒
首先請你看最簡單的造出對話盒的方法,
這是將 alert( ) 放在 &script& 的範圍內。
練習-24 造出 alert 對話盒
<font color="#. 請用瀏覽器開啟示範磁碟中的
, 這檔案有以下內容:。
&html& &body bgcolor=beige
&h1& &font color=blue&示範網頁 : 第一部份
&/font& &p&&/br&
alert(& 看到這處覺得怎樣? 請按一下繼續
&p& &h1& &font
color=blue&示範網頁 : 第二部份 &/font&
&p& 這是 alert1.htm &/h1&
&/body& &/html&
<font color="#. 載入這檔案時,
留意網頁執行至 alert( )
這一項會停下來, 出現一個 alert 對話盒。
<font color="#. 請你按 [確定],
留意網頁隨後部份會繼續出現。
產生這對話盒是以下的一句,
在對話盒顯示的文字是一個 argument, 放在隨後的 (
) 及要放在 & & 內。
2. 以按鈕方式叫出 alert
我們也可以用按鈕的方式叫出這 alert
對話盒, 請看以下例子。
練習-25 用按鈕叫出 alert
<font color="#. 請用瀏覽器開啟示範磁碟中的 ,
這檔案有以下內容:
&html& &body bgcolor=oldlace
text=blue&
&h1& 示範網頁: alert2.htm &/h1&
&p& &/br& ¢er&
&input type=&button& value=&本周特價
onClick=&alert('電視機全部七折')& &
&input type=&button&
value=&下周特價預告 &
onClick=&alert('錄像機全部六折' )& &
&/body& &/html&
<font color="#. 請你試試兩個按鈕的反應。
3. 用條件來叫出 alert 對話盒
以上兩個例子的對話盒都是沒有實際用途,
筆者只是用來示範 alert( ) 的操作方式,
以下是例子是設定一個條件, 若有某一個情況,
就會有 alert 對話盒出現。
練習-26 用 alert
對話盒提示觀看者轉換螢幕解像度
這處假定你設定一個網頁,
圖片是使用 800x600 螢幕解像度, 網頁開啟時, 會有一個
JavaScript 檢查觀看者的螢幕解像度, 若左右少於 800
點或 (OR) 上下少於 600 點,
就會有對話盒提示觀看者提高解像度。
<font color="#. 試驗這網頁前, 請你先將螢幕的解像度設為
640x480, 然後用瀏覽器開啟示範磁碟中的
, 這檔案有以下內容。
&html& &body bgcolor=pink
text=blueviolet&
&h1& 示範網頁: &/h1& &p& &/br&
if(screen.width&800 || screen.height&600)
{ alert(&本網頁使用 800x600
解像度才能看到最佳的效果。& ) }
alert3.htm &/h2&
&/body& &/html&
<font color="#. 若網頁開啟時,
螢幕解像度是 640x480, 你應看到 alert 對話盒出現。請你改變電腦的螢幕解像度,
例如 720x480、864x480、800x600 等等, 再載入這網頁,
看有什麼效果。
(在「視窗-98」,
調校螢幕解像度後, 無需重新啟動就立刻生效,
你在瀏覽器中選 [重新整理] (Reload) 來重新載入網頁,
就可立刻看到效果。)
1. 這 JavaScript 使用以下的 if statement:
if(condition) { method 或
function }
這一句的 condition 就是我們設定的條件,
若這 condition 是 TRUE, 就會執行隨後的 method 或
function, 若這 method 或 function 只有一句, 可以略去 {
2. 這例子的 condition 是以下的一句:
screen.width & 800 ||
screen.height & 600
第一個條件是 screen.width 少於 800 ,
第二個條件是 screen.height 少於 600,
兩個條件用 || (OR) 來連結, 表示兩個條件只要其中一個是
TRUE, 今次的 condition 會是 TRUE, 這會引發隨後 alert(
) 這一個 method。
有關 if statement 的使用,
隨後會有詳細說明。
3. 用同樣的方法及原理, 你可檢查 pixelDepth
或 colorDepth 等資料, 然後向觀看者作出提議。
4. 對話盒內的文字分行及跳格
要在對話盒的文字分行來顯示,
你是不能使用以下的 script, 因為一個 argument
不能分行, 也不能使用 HTML 的 &p& 標籤。
alert(&本網頁使用 800x600 ←
解像度才能看到最佳的效果。&)
要分行或加入跳格位,
可使用以下三個控制碼 ( n 代表 new line, r 代表
return, t代表 tab ) :
跳去下行。 (在 IE 及 Netscape,
這控制碼使到文字跳去下行及最左端,
若要跳兩行就用 \n \n。)
這是游標回位, 在 IE 及 Netscape,
這控制碼與 \n
有相同效果。
\n \r 或 \r \n
在 IE 及 Netscape, 這會跳兩行。
加一個跳格位。
留意使用 \n \r 時,
兩個參數要有空格分開, 若使用 \n\r, IE 會作為一個參數來處理
(跳一行), Netscape 則作兩個 (跳兩行)。
例如使用以下的 script:
alert(&本網頁使用: \t 800x600 \n \n 解像度才能看到最佳的效果。&)
會有以下對話盒:
圖 3-1 在
alert 對話盒內的分行
Confirm 對話盒
在前一節你看過 alert 對話盒,
在這處讓我們看 confirm 對話盒, 這對話盒有兩個鍵:
[確定] 及 [取消], 我們要用 function 來設定每個鍵的功用,
這兩個鍵才會生效。
Confirm
對話盒的兩個選擇鍵是由操作系統造出來,
無論你用英文或中文版的瀏覽器,
在「中文視窗」會是 [確定] 及 [取消], 在英文版
Windows 會是 [OK] 及 [Cancel]。
confirm( ) 是一個 method, 屬 window
的 property, 有這格式: window.confirm(&顯示字句
&), 但可簡為 confirm(&顯示字句
1. Confirm 對話盒示範
練習-27 confirm( ) 使用示範
這處首先請你試驗以下簡單的 confirm 對話盒, 看這
method 如何操作。
<font color="#. 請用瀏覽器開啟示範磁碟中的
, 這檔案有以下內容:
&html& &body
bgcolor=lightcyan text=red& &h1& 示範網頁
confirm(&請你選擇 [確定] 或 [取消] &)
&/body& &/html&
<font color="#. 網頁開啟後, 你應見到一個
confirm 對話盒。
<font color="#. 請你按 [確定] 按鈕,
這對話盒收起, 沒有任何反應。請重新載入這
confirm1.htm 檔案, 今次按 [取消] 按鈕,
也應沒有反應, 因為這兩個按鈕在這例子中還未定義。
2. 與 if ... else statement
上個例子的單純 confirm
對話盒是沒有用途的, 因為 confirm 對話盒要與 if
... else 一起使用, 觀看者按 [確定] 就代表選擇
TRUE, 按 [取消] 就代表選擇 FALSE, 這就可讓觀看者作出選擇,
請看以下例子。
練習-28 Confirm
對話盒的條件設定 (1)
在這練習,
你看到如何設定一個 confirm 對話盒, 並為 [確定]
及 [取消] 這兩個按鈕設下 if...else 反應。
<font color="#. 請用瀏覽器開啟示範磁碟中的
, 這檔案有以下內容:
&html& &body bgcolor=cyan text=red& &h1& 示範網頁
if ( confirm (&請你選擇 [確定] 或 [取消] &) )
{ alert(&你按了 [確定], 代表選了 TRUE
& else { alert(&你按了 [取消], 代表選了 FALSE &
&/body& &/html& &
<font color="#. 載入這網頁後, 你應見到
confirm 對話盒的出現, 請你先試驗 [確定]
這按鈕, 然後重新載入這網頁, 再試驗 [取消] 按鈕,
看有什麼文走出來。
當 confirm( ) 與 if ... else 一起使用時,
有以下語法:
if (confirm(& 對話盒顯示文字
{ 反應
1 } ← 按 [確定] 有這反應
else { 反應
2 } ←按 [取消] 有這反應
若 { } 內的句子只有一句, 可以省去 {
}, 這處你要留意, 我們按 [取消], 實際是引發
else 的 反應 2 , 若不設定 else 的反應, 就沒有反應,
感覺上就好像是取消這對話盒。
3. 用按鈕叫出 confirm 對話盒
練習-29 Confirm
對話盒的條件設定 (2)
在前面的練習,
你看過如何為 confirm 對話盒設下 if ... else
反應, 在這處例子, confirm 對話盒是放在一個
function之內, 觀看者在這對話盒作出反應, 就可決定
function 的反應, 今次例子是觀看者可選擇是否載入一幅圖片。
<font color="#. 請用瀏覽器開啟示範磁碟中的
, 這檔案有以下內容:
&html& &head&
function confirmChoice( )
{ if ( confirm (&作者樣貌可能令人看後覺得不安,
真的要看? &) )
&&&& { document.authorPic.src=&author.jpg& }
&body bgcolor=pink text=blueviolet&
&h1& &font color=blue& 示範網頁: &/font&
&/h1& &p& &/br&
&input type=&button& value=& 看作者相片
onClick=&confirmChoice( ) & &
&img src=blank.gif name=authorPic width=150 height=150&
&/body& &/html& &
<font color="#. 網頁中有一個 [看作者相片]
的按鈕, 請你按一下, 就會有一個
confirm 對話盒出現, 請你按 [確定],
應見到網頁載入一幅圖片。
<font color="#. 請重新載入檔案及按
[看作者相片] 的按鈕, 在出現的對話盒中按 [取消],
看與按 [確定] 有可不同。
1. 在這例子,
筆者使用以下的一句造出一個圖片位置:
&img src=blank.gif
name=authorPic &
筆者將這圖片位置命名為 authorPic,
是一幅空白的圖片。
2. 筆者設定一個名為 confirmChoice(
) 的 function 來叫出一個 confirm 對話盒, 如下:
function confirmChoice(
{ if ( confirm (&作者樣貌可能令人看後覺得不安,
真的要看? &) )
{ document.authorPic.src=&author.jpg
觀看者按 [確定] 就會引發以下反應:
document.authorPic.src=&author.jpg&
這是將 author.jpg 這圖片作為 authorPic
這圖片位置的圖片來源 (src)。
3. 前面說過 confirm 對話盒有以下語法:
if (confirm(& 對話盒顯示文字
{ 反應
1 } ← 按 [確定] 有這反應
else { 反應
2 } ←按 [取消] 有這反應
這例子沒有設定 else 的反應, 觀看者按 [取消],
對話盒就會收起, 不會有其他反應。
4. Confirm 對話盒的 return false
在 confirm 對話盒選 [取消], 實際是傳回一個
false 值, 若我們是使用 onClick來叫出這
confirm 對話盒, 這 false 值就傳回給這 onClick,
這會取消 onClick 的操作, 請參看 練習-81
Prompt 對話盒
Prompt 是提示輸入,
這類對話盒是用來提示觀看者輸入一些資料,
請先以下簡單的例子。
1. 單純的 prompt 對話盒
練習-30 單純的 prompt
在這練習,
你看到如何造出一個 prompt 對話盒。
<font color="#. 請用瀏覽器開啟示範磁碟中的
, 這檔案有以下內容:
&html& &body bgcolor=beige
&h1& 示範網頁 &/h1& &p& &br&
&input type=button value=&試驗 Prompt 對話盒
onClick='prompt(&請輸入你的名字&, &你的名字
&/body& &/html&
<font color="#. 網頁開啟後,
你會見到一個按鈕, 按一下會走出 圖3-3
的對話盒, 請你試在對話盒中的文字框輸入文字,
然後按 [確定] 或
[取消], 你應不見有任何反應, 因為這要有其他設定來配合。
Prompt 對話盒有以下語法:
這處有兩個 argument, 用 , 來分隔,
第二個 argument 是預設在文字框中出現的文字。
2. 捕捉在 prompt
對話盒輸入的文字
練習-31 捕捉在prompt對話盒輸入的文字
Prompt
對話盒的用途是讓觀看者輸入一些資料,
我們可以捕捉這些資料, 然後放在網頁其他地方使用,
這網頁示範這個使用方式。
<font color="#. 請用瀏覽器開啟示範磁碟中的
, 這檔案有以下內容:
&html& &body bgcolor=beige
text=red& &h1& 示範網頁 &/h1& &p&
inputText=prompt(&請輸入你的名字
document.write(&Hello, &font
size=+2& &b&& + inputText
+ & &/b& &/font&,
welcome! &)
&/body& &/html&
<font color="#. 網頁開啟時,
會先出現一個對話盒, 請你輸入一些文字, 按
[確定], 你會見到這文字在網頁中出現。
<font color="#. 請你重新載入這網頁,
在對話盒輸入文字, 又或不輸入文字, 按 [取消]
按鈕, 留意在網頁出現的應是: Hello, null , welcome! 。
1. 留意這 JavaScript 中這一句:
inputText=prompt(&請輸入你的名字
這處用一個 inputText 的變數來代表觀看者輸入的文字,
例如輸入的文字是 Peter Wong, inputText
就代表了 Peter Wong, 隨後用 document.write( ) 或其他方法就可顯示或使用這名稱。
2. 假若按 [取消], 就會傳回一個 null
3. 在中文版 IE, 在對話盒輸入中文字,
可能引致在 document.write( ) 內隨後的文字不能顯示,
在這例子, 你試在 IE 中, 在對話盒輸入一些中文字,
welcome! 這字不會出現,
輸入英文字不會有這現象, Netscape
沒有這情況出現。
3. 用 prompt 對話盒在 form
中輸入資料
的一章會說到如何設定讓觀看者輸入資料的表單,
我們可以設定一些驗証 (validation) 的方法,
若在某項目中觀看者漏了輸入, 就會走出一個
prompt 對話盒來讓觀看補回資料。 若你看這例子有困難,
可以學習完第13章 再回來看這例子。
這處是示範 prompt 對話盒的操作, 所以對
validation 的部份簡化了, 詳細驗証操作請看 form
練習-32 用 prompt
對話盒輸入 form 的資料
<font color="#. 請你將示範磁碟中的 prompt3.htm 檔案複製去硬碟,
用「記事本」開啟這檔案, 在 action
的一項填上你的電郵地址, 例如:
<font color="#. 請用瀏覽器開啟硬碟中你的
, 這檔案有以下內容:
&html& &head&
function checkNo( )
{ if (document.orderBox.itemNo.value==&&)&
& { inputText=prompt(&你要訂多少數量?&,&1&)
document.orderBox.itemNo.value=inputText
&/head& &body bgcolor=bisque
text=red& &h1& 示範網頁 &/h1&
&form name=&orderBox&
method=&post&
action=&mailto:.hk&
enctype=&text/plain&
onSubmit=&checkNo( )&&
你要訂的數量:
&input type=&text& name=&itemNo&
size=5 value=&&&
&input type=&submit& value=& 送出資料&&
&/body& &/html&
<font color="#. 網頁開啟後,
你應見到以下顯示:
請你在文字框中填上任何數字,
然後按 [送出資料] 的按鈕,
有以下提示對話盒:
圖 3-4 要你確定是否寄出表單資料的對話盒
若你按 [確定],
就會叫出郵寄的功能, 若你使用 IE4, 就會叫出
Outlook 來寄出以上網頁中的表單資料, 郵寄目標是 action=
&mailto: . . . & 後的電郵地址, 你使用自己的地址,
稍後就會收到郵件, 若你不改這示範網頁的地址,
就會寄了來本公司。
若你只要看這 prompt
對話盒的示範, 可按 [取消], 這就不會寄出表單的資料。
<font color="#. 請你重新載入這網頁,
不填入任何資料, 就按 [送出資]
的按鈕, 就會叫出以下的 prompt 對話盒:
Prompt 對話盒
請你填入一個數字,
例如 10, 按 [確定],
就會見到 圖3-4
的對話盒, 請你將這對話盒拉開,
就會看到下面的文字框已填上10:
<font color="#. 看完這數字,
你可在對話盒中按 [取消], 不用寄出資料。
筆者不解釋這例子的操作, 你看完第 13章
再回來看這例子, 就會明白了。
4. Prompt
對話盒的按鈕的傳回值
Prompt 對話盒中有 [確定] 與 [取消] 的按鈕,
按 [確定] 的按鈕就會傳回觀看者輸入的資料, 按 [取消]
按鈕又會傳回什麼呢? 請看以下例子。
練習-33 Prompt
對話盒內按鈕的傳回值
在這練習, 你要看在prompt對話盒中,
輸入資料及不輸入資料就按 [確定] 及按 [取消],
會傳回什麼資料呢?
<font color="#. 請用瀏覽器開啟示範磁碟中的
, 這檔案有以下內容。
&html& &body&
entry=prompt(&請填入一個數值
alert(entry)
&/body&&/html&
<font color="#. 網頁開啟後,
你會見到一個 prompt 對話盒, 請你試試以下四個情況,
看在 alert 對話盒中有什麼顯示 (這是 prompt
對話盒傳回的資料）。
<font color="#. 不輸入任何字符,
按 [取消]。
2. 不輸入任何字符, 按
3. 輸入一個數字或字母, 例如 123, 按 [取消]。
4. 輸入一個數字或字母, 例如 123, 按 [確定]。
以上說的四個試驗, 分別有以下結果:
2. (沒有任何資料)
從以上試驗可知道, 按 [取消] 按鈕會傳回 null,
留意這 null 是一個變數, 不是 &null&
文字。按 [確定] 就會傳回文字框的文字, 若文字框沒有資料就空出來
(即是 && )。
我們有時要使用上述的傳回值來檢查用者是否有輸入資料,
或是按了 [取消], 請參看練習-45。
( 第 3 章 完 )
