《HTML5 开发实例大全》——1.18 通过JavaScript脚本获取并显示文本框的内容-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5 开发实例大全》——1.18 通过JavaScript脚本获取并显示文本框的内容

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.18节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.18 通过JavaScript脚本获取并显示文本框的内容


<a href=https://yqfile.alicdn.com/9cb37fec9fba045d33c85495eabed3de5bb00df6.png" >

实例说明

在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;![screenshot]({})

  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所示。


<a href=https://yqfile.alicdn.com/6f2d36249b8a021af11965f9e4febf3865a95e74.png" >

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章