《HTML5 开发实例大全》——1.18 通过JavaScript脚本获取并显示文本框的内容
教程管理员 发布于2023-09-29 08:02 HTML教程 171
本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.18节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.18 通过JavaScript脚本获取并显示文本框的内容
实例说明
在HTML 5应用中，为了增加页面的互动性，需要对文档编写客户端脚本，最常用的语言是JavaScript。通过编写客户端的脚本语言，可以实现对页面文档进行验证表单、变更内容等操作。
在页面文档中，有如下两个用于标志脚本的标签。
（1）< script >元素：既可以包含脚本语言，也可以通过src属性导入一个脚本文件；同时选择元素的必选属性type与MIME类型。
（2）< noscript >元素：是一个检测工具，用于< script >中的脚本内容未被执行时显示的内容，即浏览器如果支持< script >中的脚本，则不会显示< noscript >中的内容。
在本实例的页面中，分别设置一个文本框“txtContent”和一个“单击我试试”按钮。当单击按钮后，通过页面中加入的JavaScript脚本代码获取文本框中的内容，并且显示在页面中。
具体实现
使用Dreamweaver创建一个名为“018.html”的文件，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>使用脚本元素</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="true">
function Btn_Click(){
var strTxt=document.getElementById("txtContent").value;
var strDiv=document.getElementById("divShow");
strDiv.style.display="block";
strDiv.innerHTML="老大，你输入的字符是："+strTxt;
}
</script>
<noscript>您的浏览器不支持 JavaScript!</noscript>
</head>
<body>
<input type="text" id="txtContent"
class="inputtxt" />
<input type="button" value="单击我试试"
class="inputbtn" onClick="Btn_Click();">
<div id="divShow" class="divShow"></div>
</body>
</html>
在上述代码中，在< script >元素中设置async属性的值为true，也就是说允许脚本在页面解析时异步执行。通过这个新增的属性，可以在很大程度上缓解页面解析的压力，提高页面的加载速度。同时又不会阻碍< script >元素中脚本的执行。如果是执行大量的JavaScript代码，其效果将更加明显。在上述< script >元素中，定义了一个用于单击页面按钮时显示在文本框中输入内容的函数Btn_Click()。如果浏览器支持< script >元素，单击按钮时执行该函数，否则将显示< noscript >元素中的内容。
为了增强页面的美观性，特意编写CSS样式文件来修饰上述网页元素。样式文件css.css的代码如下所示。
@charset "utf-8";
/* CSS Document */
body {
font-size:12px
}
.inputbtn {
border:solid 1px #ccc;
background-color:#eee;
line-height:18px;
font-size:12px
}
.inputtxt {
border:solid 1px #ccc;
line-height:18px;
font-size:12px
}
.divShow {
border:solid 1px #666;
background-color:#eee;
margin-top:5px;
padding:5px;
width:196px;
display:none
}
h5 {
padding:0px;
margin:0px
}
ol li {
padding-top:5px
}
.p3_5,.p3_7,.p3_8{
border:solid 1px #ccc;
background-color:#eee;
padding:8px;
width:380px;
margin-top:5px;
}
.p3_10{
padding:8px;
width:260px;
margin-top:5px;
margin-bottom:5px;
}
执行后的效果如图1-34所示，在文本框中输入文本并单击“单击我试试”按钮后，将在下方显示在文本框中输入的文本，如图1-35所示。
相关推荐
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序，Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 10-04 腾讯视频生成的Html代码
- 10-04 ie下tbody的innerhtml属性只读
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-
