📄 day5_4.html
字号:
</tr>
<tr>
<td colspan="2" height="14"><a href="../../1-backend/protocols/ping/index.html"><font face="arial, helvetica, sans-serif">Ping</font></a></td>
</tr>
<tr>
<td colspan="2" height="20"><a href="../../1-backend/cgi_perl/search_engine/index.html">-创建搜索引擎</a></td>
</tr>
<tr>
<td colspan="2" height="16">-<a href="../../1adobe/GoLive/index.html">Adobe GoLive</a></td>
</tr>
<tr>
<td colspan="2"><a href="../../1-backend/cgi_perl/templates/index.html">模板</a></td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#666699"><font color="#FFFFFF">合作伙伴</font></td>
</tr>
<tr>
<td colspan="2" align="left">-<a href="http://www.5dmedia.com/" target="_blank">5D精英网</a></td>
</tr>
<tr align="center">
<td colspan="2"> <img src="../../Library/front_monkey.gif" width="59" height="68"></td>
</tr>
</tbody>
</table>
<br><!-- #EndLibraryItem --></td>
<!-- End of headlines (column 1: left column) --> <!-- Gutter between columns 1 and 2 -->
<td width="10" height="794"><img src="http://www.sohu.com/images/pixel.gif" width=10></td>
<!-- Search box and directories (columns 2 and 3: middle columns, combined into one) -->
<td align=center valign=top width="558">
<div align="left"><!-- #BeginEditable "1" -->
<title>JavaScrip教程</title>
<strong>第四页：<font size="3">文字域事件</font></strong>
<p> </p>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <font size="2"></font><font size="3" face="宋体">文字域可以链接<tt>onBlur</tt>、<tt>onFocus</tt>、和<tt>onChange</tt>事件。<tt>当有<br>
人点击文字域的里边时则发生onFocus</tt>事件。而如果点击文<br>
字域的外面或按了tab键时则发生onblur事件。如果有人改<br>
变了文字域内的内容然后转到文字域外部的区域时则发生<br>
<tt>onChange</tt>事件。 </font>
<p><font size="3"></font><font size="3" face="宋体">试着做这些事情看下面的文字域会发生什么情况。</font></p>
<form name="first_form" onSubmit="return false;">
<p> <font size="3"></font><font size="3" face="宋体">
<input type="text" name="first_text" onFocus="writeIt('focus');" onBlur="writeIt('blur');" onChange="writeIt('change');" size="20">
</font></p>
<p> <font size="3"></font><font size="3" face="宋体">
<textarea name="the_textarea" rows="10" cols="40">
</textarea>
</font></p>
</form>
<font size="3">
<p>以下是编制方法：文字域的编码：
</font></td>
</tr>
</table>
<ul>
<pre><big><font face="宋体">
<input type="text" name="first_text"
onFocus="writeIt('focus');"
onBlur="writeIt('blur');"
onChange="writeIt('change');">
</font></big></pre>
</ul>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font size="3" face="宋体">每一个事件处理器调用函数<tt>writeIt()</tt>，该函数在<br>
首部中已作了定义。首部中的编码如下： </font></td>
</tr>
</table>
<ul>
<pre><font face="宋体">
<head>
<title>Text Field Events</title>
<script language="JavaScript">
<!-- hide me
function writeIt(the_word)
{
var word_with_return = the_word + "\n";
window.document.first_form.the_textarea.value +=
word_with_return;
}
// show me -->
</script>
</head>
</font></pre>
</ul>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font face="宋体">前几行是典型的JavaScript预定义。主体中的第1<br>
行</font></td>
</tr>
</table>
<ul>
<pre><font face="宋体">
var word_with_return = the_word + "\n";
</font></pre>
</ul>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font face="宋体">将一个变量<tt>word_with_return</tt>进行初始化为函数处<br>
理后的字符串并加上换行符<tt>"\n"</tt>.。注意<tt>"\n"</tt> 是标<br>
准的计算机指令。 </font>
<p><font face="宋体">下一行</font>
</td>
</tr>
</table>
<ul>
<pre><font face="宋体">
window.document.first_form.the_textarea.value += word_with_return;
</font></pre>
</ul>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font face="宋体">将文字区域的值设置为其原值加新变量。其作用相<br>
当于 </font></td>
</tr>
</table>
<ul>
<pre><font face="宋体">
window.document.first_form.the_textarea.value =
window.document.first_form.the_textarea.value + word_with_return;
</font></pre>
</ul>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font face="宋体">目前我们已经学习了文字域和文字区域（值）的属性，接下<br>
来我们学习文字域和文字区域处理所用的方法：<tt>blur()</tt>、<br>
<tt>focus()</tt>、和<tt>select()。</tt></font>
<p><font face="宋体">下面的链接显示了<tt>focus()</tt> 和<tt>()</tt>如何工作。注意他们工作一<br>
次后可能会终止功能。</font></p>
<table>
<tr>
<td colspan="2">
<form name="method_form">
<p><font face="宋体">
<input type="text" name="method_text" size="40" value="Hey, hey, we're the monkeys">
</font></p>
</form>
</td>
</tr>
<tr>
<td><font face="宋体"><a href="#" onMouseOver="window.document.method_form.method_text.focus();">Mouseover
to focus</a> </font></td>
<td><font face="宋体"><a href="#" onMouseOver="window.document.method_form.method_text.select();">Mouseover
to select</a> </font></td>
</tr>
</table>
<p><font face="宋体">以下为表单和链接的编码： </font>
</td>
</tr>
</table>
<ul>
<pre><font face="宋体">
<form name="method_form">
<input type="text" name="method_text" size=40 value=
"Hey, hey, we're the monkeys">
</form>
<a href="#" onMouseOver=
"window.document.method_form.method_text.focus();">
Mouseover to focus</a>
<a href="#" onMouseOver=
"window.document.method_form.method_text.select();">
Mouseover to select</a>
</font></pre>
</ul>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font face="宋体">其使用方法和调用任何对象方法的做法是一样的：<br>
<tt>object_name.method()</tt>. 该文字域的名称是 <br>
<tt>window.document.form_name.text_field_name</tt>， <br>
所以用下列语句就可调用文字域的<tt>focus()</tt>方法。 </font></td>
</tr>
</table>
<ul>
<pre><font face="宋体">
window.document.method_form.method_text.focus();
</font></pre>
</ul>
<p align="left"><a href="day5_5.html">>></a></p>
<p align="left"><font face="宋体" size="3" color="#000000"><strong>JavaScript教程</strong></font><font color="#FF0000" face="宋体" size="3"><br>
</font><font size="3"><font color="#FF0000">第一页</font> <a href="day5_4.html">第五课课程介绍</a><br>
<font color="#FF0000">第二页</font> <a href="day5_2.html">介绍反馈表单</a><br>
<font color="#FF0000">第三页</font> <a href="day5_3.html">控制文字域的值</a><br>
<font color="#FF0000">第四页</font> 文字域事件<br>
<font color="#FF0000">第五页</font> <a href="day5_5.html">反馈表单处理器</a><br>
<font color="#FF0000">第六页</font> <a href="day5_6.html">文字域的练习</a><br>
<font color="#FF0000">第七页</font> <a href="day5_7.html">复选框</a><br>
<font color="#FF0000">第八页</font> <a href="day5_8.html">单选框</a><br>
<font color="#FF0000">第九页</font> <a href="day5_9.html">选单</a><br>
<font color="#FF0000">第十页</font> <a href="day5_10.html">在选单中应用<font face="宋体">onchange</font>命令</a></font></p>
<p align="left"><font face="宋体" size="3">[<a href="index.html">第1课</a>][<a href="day2_1.html">第2课</a>][<a href="day3_1.html">第3课</a>][<a href="day4_1.html">第4课</a>][第5课]</font></p>
<!-- #EndEditable --></div>
</td>
<!-- End of search box and directories (columns 2 and 3: middle columns, combined into one) -->
<!-- Gutter between columns 3 and 4 --> <!-- Other stuff (column 4: right column) -->
<!-- End of other stuff (column 4: right column) --> </tr>
</table>
<!-- End of table surrounding page contents -->
<hr noshade size=1 width=700>
<span class=eng><br>
Copyright (C) 1998-2000 Internet Technologies China. All rights reserved.
</span>
</center>
</body>
<!-- #EndTemplate --></html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -