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

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

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

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" 

 input type="button" value="单击我试试" 

 div id="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

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

https://yqfile.alicdn.com/6f2d36249b8a021af11965f9e4febf3865a95e74.png"

小程序后台传过来富文本内容，小程序展示文本——不用js 做项目过程中，经常遇到接口里传过来的内容是包含html标签的，但是样式又不全面，导致在小程序显示的时候，整个界面都是乱的。 这时候就要用到rich-text
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。