- Java Web程序开发范例宝典
- 王国辉 郭铁 李根福编著
- 1183字
- 2020-06-27 11:01:01
1.2 文本字段
文本字段是用来输入任何类型的单行文本、数字或字母数据的文本域。在进行网络程序设计时，经常使用文本字段组件收集用户的输入信息。下面通过具体实例说明文本字段组件在JSP中的应用。
实例005 定义文本域、下拉列表和按钮的样式
这是一个提高录入准确性的实例
实例位置：光盘\mingrisoft\01\005
实例说明
在开发程序的过程中，经常会应用到form表单，通过它来获取信息。为了使form表单中元素更加美观，可以通过CSS来定义表单中元素的样式。本实例中讲解如何通过CSS样式来定义Form表单中文本域、下拉列表和按钮的样式。运行结果如图1.9所示。
图1.9 定义文本域、下拉列表和按钮的样式
技术要点
本实例主要通过CSS样式来设置文本域、下拉列表和按钮的样式，通过inputcss类设置文本域的样式，通过selectcss类设置下拉列表的样式，通过buttoncss类设置按钮的样式。通过CSS定义的样式如下：
.buttoncss {
font-family: "Tahoma", "宋体";
font-size: 9pt; color: #003399;
border: 1px #003399 solid;
color:006699;
BORDER-BOTTOM: #93bee2 1px solid;
BORDER-LEFT: #93bee2 1px solid;
BORDER-RIGHT: #93bee2 1px solid;
BORDER-TOP: #93bee2 1px solid;
background-color: #ffffff;
CURSOR: hand;
font-style: normal ;
}
.inputcss {
font-size: 9pt;
font-family: "宋体";
font-style: normal;
BORDER-BOTTOM: #93bee2 1px solid;
BORDER-LEFT: #93bee2 1px solid;
BORDER-RIGHT: #93bee2 1px solid;
BORDER-TOP: #93bee2 1px solid;
}
.selectcss {
font-size: 9pt;
font-family: "宋体";
background:#93bee2;
}
实现过程
（1）在根目录下创建css文件夹，在该文件夹中创建style.css文件，定义设置文本域、下拉列表和按钮的样式。
（2）创建index.jsp页面，添加form表单，插入文本域、下拉列表和按钮，并通过CSS定义form表单中元素的样式。关键代码如下：
<form name="form1" method="post" action="index.php">
<tr>
<td width="96" height="30" align="center" bgcolor="#FFFFFF" class="style1 STYLE1">管理员:</td>
<td width="181" height="30" align="center" bgcolor="#FFFFFF"><input name="username" type="text" id="username"
size="20" class="inputcss"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" class="STYLE1">权限：</td>
<td height="30" align="center" bgcolor="#FFFFFF"><select name="select" class="selectcss" >
<option value="员工管理员">员工管理员</option>
<option value="经理管理员">经理管理员</option>
<option value="超级管理员">超级管理员</option>
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" class="STYLE1">密码:</td>
<td height="30" align="center" bgcolor="#FFFFFF"><input name="password" type="password" id="password" value=""
size="20"></td>
</tr>
<tr>
<td height="25" colspan="2" align="center" bgcolor="#FFFFFF"><input type="submit" name="Submit" value="提交"
class="buttoncss">
<input type="reset" name="Submit2" value="重置"></td>
</tr>
</form>
举一反三
根据本实例，读者可以：
通过CSS样式定义论坛注册用户的表单；
控制管理员登录中提交按钮的样式；
控制级联菜单中下拉列表的样式。
实例006 设置文本框的只读属性
这是一个提高安全性的实例
实例位置：光盘\mingrisoft\01\006
实例说明
网页中有一部分信息是不允许浏览者进行任何修改的，即用户只有浏览的权限，而没有修改的权限。这可以通过将文本字段设置为只读属性实现。运行本实例，在该页面中单击某一记录后的“修改”超级链接，将弹出修改用户信息页面，在该页面中的“用户名称”文本字段是只读的，当用户单击该文本字段时将弹出“此文本框已设为只读，用户名称不能修改！！”的提示对话框，如图1.10所示。
图1.10 设置文本字段的只读属性
技术要点
实现本实例首先需要将文本字段设置为只读属性，然后通过设置文本字段的单击事件实现当用户单击已经设置为只读属性的文本字段时，弹出一个提示对话框，提示用户不能进行修改。
将文本字段设置为只读属性有两种方法，一种是应用文本字段的readonly属性实现，另一种是应用文本字段的disabled属性实现。
注意：在使用readonly和disabled属性时，只需在<input>标记中加入属性名称即可，如<input type="text" readonly>。
实现过程
通过如下代码设置文本字段相关属性值。
<input name="name1" type="text" class="text" id="name1" value="<%=rs2("name1")%>" readonly onclick="alert('此文本字段
已设为只读，用户名称不能修改！！')">
举一反三
根据本实例，读者可以：
在编写修改用户信息程序时，应用该技术；
在开发修改用户权限程序时，应用该技术；
在编写修改用户密码模块时，应用该技术。
实例007 让您的密码域更安全
这是一个可以提高分析能力的实例
实例位置：光盘\mingrisoft\01\007
实例说明
对于网络应用程序或网站来说，安全最为重要。在众多安全中最基本也是最重要的就是密码域的安全，虽然在密码域中已经将所输入的字符以掩码形式显示，但是它并没有起到真正保密的作用，因为用户可以通过复制该密码域中的内容，并将复制的密码粘贴到其他文档中的方法，查看到该密码的“真实面目”。为了保证密码的真正安全，笔者将密码域的复制功能屏蔽，同时将密码域的掩码符号也改变了。运行本实例，输入密码并选中所输入的密码，单击右键，发现原来的复制菜单项变为灰色不可用状态，并且复制快捷键“Ctrl+C”也不可用。程序运行结果如图1.11所示。
图1.11 让您的密码域更安全
技术要点
禁止复制密码域的内容主要是通过控制其oncopy、oncut、onpaste事件实现的。
要改变密码域中掩码的样式可以通过改变其样式属性style来实现。
注意：在修改掩码的样式时一定要选择Windows系统自带的字体样式，否则如果他人计算机中无该字体，密码将会以原型显示。
实现过程
（1）在页面适当位置添加密码域，代码如下：
<input name="PWD" type="password" id="PWD" size="20">
（2）改变密码域的掩码样式，将其font-family属性设置为Wingdings，代码如下：
<input name="PWD" type="password" id="PWD" size="20" style=" font-family:Wingdings; width:129;">
（3）添加代码禁止用户复制、剪切和粘贴密码，代码如下：
<input name="PWD" type="password" id="PWD" size="20" style=" font-family:Wingdings; width:129;" oncopy="return false"
oncut="return false" onpaste="return false">
举一反三
根据本实例，读者可以：
开发办公自动化系统中的员工登录页面；
开发电子商务系统中的管理员登录页面；
开发电子商务系统中的会员注册页面。
实例008 限制文本域输入字符个数
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\008
实例说明
在网站的论坛或留言簿中，通常都是在多行文本域中输入留言的内容，而多行文本域不具备限制用户输入最多字符个数的功能，因此要想控制多行文本域输入的字符个数，必须由程序员自己编写代码。运行本实例，在“留言”文本域中只能输入1600个字节，也就是1600个英文字母，800个中文汉字，用户在文本域中每输入一个字母，下面的字节位置都将自动计算已输入字节数和剩余字节数，如图1.12所示。
图1.12 限制多行文本域输入的字符个数
技术要点
实现限制多行文本域输入的字符个数的功能的关键是在其onkeydown事件和onkeyup事件中调用自定义的JavaScript函数CountStrByte()，来限制输入的最多字符数并计算已输入字节数与剩余字节数。下面介绍onkeydown事件和onkeyup事件。
onkeydown事件：访问者按键盘上一个或几个键的事件。
onkeyup事件：访问者按键盘上一个或几个键后释放的事件。
注意：在计算字符数时，需要判断输入的字符是汉字还是英文字母或数字，因为一个汉字占两个字节。另外，onkeydown事件和onkeyup事件只适合于Internet Explorer 4.0及4.0以上浏览器。
实现过程
（1）在网页的适当位置添加“留言”多行文本域。代码如下：
<textarea name="content" cols="50" rows="9" class="wenbenkuang" id="content"></textarea>
（2）在网页的适当位置添加字节区域代码，作用是最多允许输入文本域、已用字节文本域和剩余字节文本域字符数，注意此时应该将这3个文本域设置为不可用状态，不允许用户修改，代码如下：
最多允许
<input name="total"type="text"disabled class="noborder"id="total" value="1600"size="4">
个字节 已用字节：
<input name="used"type="text"disabled class="noborder"id="used" value="0"size="4">
剩余字节：
<input name="remain" type="text" disabled class="noborder" id="remain" value="1600" size="4">
（3）编写自定义的JavaScript函数CountStrByte()，用于判断用户输入的字符数是否大于允许输入的字符数并计算已用字节数与剩余字节数，代码如下：
<SCRIPT language=JavaScript>
var LastCount =0;
function CountStrByte(Message,Total,Used,Remain){
var ByteCount = 0;
var StrValue =Message.value;
var StrLength = Message.value.length;
var MaxValue =Total.value;
if(LastCount != StrLength){
for (i=0;i<StrLength;i++){
ByteCount =(StrValue.charCodeAt(i)<=256)?ByteCount+1:ByteCount+2;
if (ByteCount>MaxValue) {
Message.value = StrValue.substring(0,i);
alert("留言内容最多不能超过 "+MaxValue+" 个字节！\n注意：一个汉字为两个字节。");
ByteCount = MaxValue;
break;
}
}
Used.value = ByteCount;
Remain.value = MaxValue - ByteCount;
LastCount = StrLength;
}
}
</SCRIPT>
（4）修改“留言”多行文本域的代码，在onkeydown事件和onkeyup事件中调用自定义的JavaScript函数CountStrByte() 来限制输入的最多字符数并计算已输入字节数与剩余字节数，代码如下：
<textarea name="content" cols="50" rows="9" class="wenbenkuang" id="content" onkeydown="CountStrByte(this.form.content,
this.form.total,this.form.used,this.form.remain);" onkeyup="CountStrByte(this.form.content,this.form.total,this.form.used,this.form.remain); ">
</textarea>
举一反三
根据本实例，读者可以：
开发同学录中的在线留言模块；
限制论坛中发表帖子和回复帖子模块中文本字段的内容；
在网站后台管理页面中，限制输入文本的字符数。
实例009 自动计算金额
这是一个提高录入准确性的实例
实例位置：光盘\mingrisoft\01\009
实例说明
在进销存管理系统中，经常需要计算销售商品的金额或入库商品的金额，手动计算比较麻烦，而且容易出错，如果在程序中实现自动计算金额，可以减少许多不必要的麻烦。运行本实例，在单价文本字段中输入单价并将光标移出文本字段或按“回车”键后，将在库存金额文本字段中显示库存数量为2时的总金额，如图1.13所示。
图1.13 自动计算金额
技术要点
本实例主要通过触发表单控件的Onblur事件（即表单控件失去焦点时）或是按“回车”键时，调用自定义的JavaScript函数autoje()实现的。
Onblur事件用于当Blur事件（即失去焦点事件）发生时执行JavaScript代码。
适用对象：
Button、Checkbox、FileUpload、Layer、Password、Radio、Reset、Select、Submit、Test、Textarea和Window
语法：
onBlur="handlerText"
参数说明：
● handlerText：JavaScript代码或对一个JavaScript函数的调用。注意：在编写JavaScript脚本时，应注意函数的大小写。
实现过程
（1）在页面中添加单价文本字段，并设置其Onblur事件和按“回车”键时执行的操作是调用autoje()函数，代码如下：
<form method="post" name="form1">
<input name="kcsl" type="text" class="text" size="10" value="" onBlur="autoje()" onKeyup="if(event.keyCode==13)
{autoje()}">
<input name="dj"type="text" class="text"size="10"value=""onBlur="autoje()"onKeyup="if(event.keyCode==13){autoje()}">
<input name="kcje"type="text"class="text"disabled=".t." size="10">
</form>
（2）利用JavaScript编写自动计算金额的函数，代码如下：
<script language="JavaScript">
function autoje(){
if (form1.kcsl.value==0){
alert("请输入数量！");
form1.kcsl.focus();
return;
}
if(isNaN(form1.kcsl.value)){
alert("您输入的不是有效值（请输入0-9之间的数）！");
form1.kcsl.focus();
return;
}
if (form1.dj.value==0){
alert("请输入单价！");
form1.dj.focus();
return;
}
if(isNaN(form1.dj.value)){
alert("您输入的不是有效值（请输入0-9之间的数）！");
form1.dj.focus();
return;
}
form1.kcje.value=form1.kcsl.value*form1.dj.value;
}
</script>
举一反三
根据本实例，读者可以：
开发企业进销存管理系统的商品入库、商品销售等模块；
开发电子商务中的购物车页面；
开发商品连锁店管理系统中的商品销售登记模块。
实例010 无刷新验证文本框的值
这是一个提高录入准确性的实例
实例位置：光盘\mingrisoft\01\010
实例说明
在编写用户注册信息添加模块时，一般都需要对用户输入信息的合法性进行判断。本实例将介绍一种通过JavaScript脚本无刷新验证用户输入信息的方法。运行本实例，如果在用户名文本字段中没输入数据，将输出“请输入用户名！”的提示信息，如果在邮政编码文本字段中输入了格式错误的数据，同样会返回一个提示信息，运行结果如图1.14所示。
图1.14 无刷新验证文本框的值
技术要点
本实例主要通过触发表单控件的Onblur事件（即表单控件失去焦点时），调用自定义的JavaScript函数chkreginfo ()实现无刷新验证用户输入信息。
Onblur事件用于当Blur事件（即失去焦点事件）发生时执行JavaScript代码。
适用对象：
Button，Checkbox，FileUpload，Layer，Password，Radio，Reset，Select，Submit，Test，Textarea, Window
语法：
onBlur="handlerText"
参数说明：
● handlerText：JavaScript代码或对一个JavaScript函数的调用。
注意：在编写JavaScript脚本时，应注意函数的大小写。
实现过程
（1）创建index.jsp页面，在页面中添加form表单，设置用户信息的文本字段，通过Onblur事件调用chkreginfo ()函数，关键代码如下：
<form name="form_reg" method="post" action="Check_UserInfo" onSubmit="return chkreginfo(form_reg,'all')">
<input type="text" name="recuser" size="20" class="inputcss" onBlur="chkreginfo(form_reg,0)"><div id="chknew_recuser"
style="color:#FF0000"></div>
<input type="text" name="address" size="60" class="inputcss" onBlur="chkreginfo(form_reg,1)"><div id="chknew_address"
style="color:#FF0000"></div>
<input type="text" name="postalcode" size="20" class="inputcss" onBlur="chkreginfo(form_reg,2)"><div id="chknew_
postalcode" style="color:#FF0000"></div>
<input type="text" name="qq" size="20" class="inputcss" onBlur="chkreginfo(form_reg,3)"><div id="chknew_qq" style=
"color:#FF0000"></div>
<input type="text" name="email" size="20" class="inputcss" onBlur="chkreginfo(form_reg,4)"><div id="chknew_email"
style="color:#FF0000"></div>
<input type="text" name="mtel" size="20" class="inputcss" onBlur="chkreginfo(form_reg,5)"><div id="chknew_mtel"
style="color:#FF0000"></div>
<input type="text" name="gtel" size="20" class="inputcss" onBlur="chkreginfo(form_reg,6)"><div id="chknew_gtel" style=
"color:#FF0000"></div>
<input type="image" src="images/form(2).jpg">
<img src="images/form.jpg" width="72" height="26" onClick="form_reg.reset()" style="cursor:hand"/>
</form>
（2）通过JavaScript编写验证用户注册信息是否合法的函数，代码如下：
function chkreginfo(form,mark,edit){
if(mark==0 || mark=="all"){
if(form.recuser.value==""){
chknew_recuser.innerHTML="请输入用户名！";
form.recuser.style.backgroundColor="#FF0000";
return false;
}else{
chknew_recuser.innerHTML="";
form.recuser.style.backgroundColor="#FFFFFF";
}
}
//……省略了部分代码
if(mark==6 || mark=="all"){
if(form.gtel.value==""){
chknew_gtel.innerHTML="请输入电话号码！";
form.gtel.style.backgroundColor="#FF0000";
return false;
}else if(!checkregtels(form.gtel.value)){
chknew_gtel.innerHTML="电话号码的格式不正确！";
form.gtel.style.backgroundColor="#FF0000";
return false;
}else{
chknew_gtel.innerHTML="";
form.gtel.style.backgroundColor="#FFFFFF";
}
}
}
（3）通过JavaScript编写验证手机号码和座机号码格式是否正确的函数，代码如下；
function checkregtel(regtel){
var str=regtel;
var Expression=/^13(\d{9})$|^15(\d{9})$/;
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
}
function checkregtels(regtels){
var str=regtels;
var Expression=/^(\d{3}-)(\d{8})$|^(\d{4}-)(\d{7})$|^(\d{4}-)(\d{8})$/;
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
}
举一反三
根据本实例，读者可以：
开发论坛的用户注册模块；
开发电子商务中会员注册模块；
开发商品连锁店管理系统中的商品销售登记模块。
实例011 自制文本编辑器
这是一个提高录入准确性的实例
实例位置：光盘\mingrisoft\01\011
实例说明
在通过文本域提交信息时，为了使编写的内容更加丰富、完美，可以通过在线文本编辑器来编辑内容。在线文本编辑器的功能非常强大，但是在某些程序中，提交内容的方式不是重点，如果使用在线文本编辑器来编辑内容，不但不能发挥在线编辑器的作用，而且还浪费了时间和空间。
因此本实例中开发了一种适合小程序使用的自制文本编辑器，通过它可以对文本域中的内容进行简单的编辑，设置字体的颜色、大小，字体加粗、斜体和下划线等。运行本实例，通过自制文本编辑器对文本域中的内容进行编辑，运行结果如图1.15和1.16所示。
图1.15 通过自制文本编辑器编辑内容
图1.16 输出编辑内容
技术要点
本实例主要应用onClick()和onChange()事件，调用自定义的JavaScript脚本函数实现对文本域中的内容进行编辑。
onClick鼠标单击时触发事件。单击是指鼠标光标停留在对象上，按下鼠标键，在没有移动鼠标的同时放开鼠标键的这一完整过程。
适用对象：
Button、Checkbox、Image、Link、Radio、Reset和Submit
语法：
onClick="handlerText"
参数说明：
● handlerText：JavaScript代码或对一个JavaScript函数的调用。
注意：在使用对象的单击事件时，如果在对象上按下鼠标键，然后移动鼠标到对象外再松开鼠标键，单击事件无效，单击事件必须在对象上按下和松开鼠标键后，才会执行单击事件的处理程序。
onChange失去焦点修改事件。即当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉列表框中使用。
语法：
onChange="handlerText"
参数说明：
● handlerText：JavaScript代码或对一个JavaScript函数的调用。
实现过程
（1）编写JavaScript脚本函数，实现对文本域中的内容进行编辑。关键代码如下：
helpstat=false;
basic=false;
function AddText(NewCode){ //设置文字大小
document.all("file").value+=NewCode
}
function showsize(size){
if (helpstat) {
alert("文字大小标记\n设置文字大小.\n可变范围 1-6.\n 1 为最小 6 为最大.\n用法:<size="+size+">这是
"+size+" 文字</size>");
} else if (basic) {
AddTxt="<font size="+size+"></font>";
AddText(AddTxt);
} else {
txt=prompt("大小 "+size,"文字");
if (txt!=null) {
AddTxt="<font size="+size+">"+txt;
AddText(AddTxt);
AddTxt="</font>";
AddText(AddTxt);
}
}
}
function bold(){ //实现文字加粗功能
if (helpstat) {
alert("加粗标记\n使文本加粗.\n用法: <b>这是加粗的文字</b>");
} else if (basic) {
AddTxt="<b></b>";
AddText(AddTxt);
} else {
txt=prompt("文字将被变粗.","请在这里输入要加粗的文字！");
if (txt!=null) {
AddTxt="<b>"+txt;
AddText(AddTxt);
AddTxt="</b>";
AddText(AddTxt);
}
}
}
function showcolor(color){ //定义文字颜色
if (helpstat) {
alert("颜色标记\n设置文本颜色. 任何颜色名都可以被使用.\n用法:<color="+color+">颜色要改变为"+color+"
的文字</color>");
} else if (basic) {
AddTxt="<font color="+color+"></font>";
AddText(AddTxt);
} else {
txt=prompt("选择的颜色是: "+color,"请在这里输入要改变颜色的文字！");
if(txt!=null) {
AddTxt="<font color="+color+">"+txt;
AddText(AddTxt);
AddTxt="</font>";
AddText(AddTxt);
}
}
}
function showfont(font){ //设置字体
if (helpstat){
alert("字体标记\n给文字设置字体.\n用法: <font="+font+">改变文字字体为"+font+"</font>");
} else if (basic) {
AddTxt="<font face="+font+"></font>";
AddText(AddTxt);
} else {
txt=prompt("要设置字体的文字"+font,"请在这里输入要改变字体的文字！");
if (txt!=null) {
AddTxt="<font face="+font+">"+txt;
AddText(AddTxt);
AddTxt="</font>";
AddText(AddTxt);
}
}
}
（2）创建index.jsp页面，在页面中添加form表单，设置文本字段和文本域。通过<script>标签，调用JavaScript脚本文件；通过onClick()和onChange()事件，调用自定义的JavaScript脚本函数实现对文本域中的内容进行编辑。关键代码如下：
<script src="js/UBBCode.js"></script>
<form name="form1" method="post" action="index_ok.jsp">
<input name="datetime" type="text" id="datetime" size="30">
<img src="images/UBB/B.gif" width="21" height="20" onClick="bold()">
<img src="images/UBB/I.gif" width="21" height="20" onClick="italicize()">
<img src="images/UBB/U.gif" width="21" height="20" onClick="underline()">
<img src="images/UBB/img.gif"width="21"height="20"onClick="img()"> 字体
<select name="font" class="wenbenkuang" id="font" onChange="showfont(this.options[this.selectedIndex].value)">
<option value="宋体" selected>宋体</option>
<option value="黑体">黑体</option>
<option value="隶书">隶书</option>
<option value="楷体">楷体</option>
</select>
字号
<select name=size class="wenbenkuang" onChange="showsize(this.options[this.selectedIndex].value)">
<option value=1>1</option>
<option value=2>2</option>
<option value=3 selected>3</option>
<option value=4>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
颜色
<select onChange="showcolor(this.options[this.selectedIndex].value)" name="color" size="1" id="select">
<option selected>默认颜色</option>
<option style="color:#FF0000" value="#FF0000">红色热情</option>
<option style="color:#0000FF" value="#0000ff">蓝色开朗</option>
<option style="color:#ff00ff" value="#ff00ff">桃色浪漫</option>
<option style="color:#009900" value="#009900">绿色青春</option>
<option style="color:#009999" value="#009999">青色清爽</option>
</select>
<textarea name="file" cols="70" rows="5" id="file"></textarea>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="Submit2" value="重置">
</form>
（3）创建index_ok.jsp文件，获取表单中提交的数据，关键代码如下：
<table>
<tr>
<td width="115" height="30" align="right" valign="middle" bgcolor="#FFFFFF">成立时间：</td>
<td width="535" align="left" bgcolor="#FFFFFF"> <%=request.getParameter("datetime")%></td>
</tr>
<tr>
<td height="130" align="right" valign="middle" bgcolor="#FFFFFF">公司目标：</td>
<td align="left" valign="top" bgcolor="#FFFFFF"> <%=request.getParameter("file")%></td>
</tr>
</table>
举一反三
根据本实例，读者可以：
开发留言板模块中的应用；
开发聊天室模块中的应用。