前端调试指南指北

时间  2019-11-07
标签 前端 调试 指南 繁體版
原文   原文链接

作人作事，安全第一

目录

1. 防止input回车提交表单Form

描述： form表单中存在button和table，table中含有input搜索框，在input中输入内容后，按回车键(Enter键)，会自动触发form表单提交。css

form主要代码以下：html

<form id="form" method="post">
    <div class="main-actions">
        <div class="row">
            <div class="col-sm-6">
                <button class="btn btn-wf-primary" id="search"><i class="be-icon fa fa-refresh"></i>搜索</button>
            </div>
        </div>
    </div>
    
    <div class="main-content">
        <table class="table" id="user_table">
            <thead>
                <tr>
                    <th width="100px">用户ID</th>
                    <th width="100px">用户姓名</th>
                    <th width="100px">用户电话</th>
                </tr>
            </thead>
            <tbody>
                <tr class="searchTr">
                    <td><input type="text" class="form-control" name="user_id"></td>
                    <td><input type="text" class="form-control" name="user_name"></td>
                    <td><input type="text" class="form-control" name="user_phone"></td>
                </tr>
            </tbody>
        </table>
    </div>
</form>
复制代码

缘由：

当button的type="submit"时（默认为submit），input文本框（input type="text"）输入后，按回车键(Enter键)将触发提交。java

当button的type="button"时，input文本框输入后，按回车键不会触发提交。jquery

代码简单示例：form表单中含table也是相似的状况ios

<!DOCTYPE html>
<html>
<head>
    <title>防止input回车提交表单Form演示</title>
</head>
<body>
	<form method="post">
		请输入用户ID： <input type="text" name="userid" id="userid" />
		<br>	
		请输入用户姓名： <input type="text" name="username" id="username" />
		<br>
		<!-- 1. 无type属性或type属性值为submit时，在input中按Enter键都将触发提交操做 -->
		<!-- 2. type属性值为button时，在input中按Enter键不触发提交操做 -->
		<button type="submit" onclick="commit_onclick()">点击提交</button>
	</form>	
	<script>
		function commit_onclick() {
			var userid = document.getElementById("userid").value;
			var username = document.getElementById("username").value;
			window.alert('Hello ' + userid + '[' + username + ']');
		}
	</script>
</body>
</html>
复制代码

2. Uncaught TypeError: $(...).bootstrapTable is not a function

出现这种错误的缘由，多是：

<1> jQuery和bootstrap顺序颠倒程序员

<2> js文件重复导入npm

<3> 没有初始化bootstrapTable，直接refreshbootstrap

<4> bootstrap版本和bootstrap-table版本不匹配浏览器

<1> jQuery和bootstrap顺序颠倒

引入js时，jQuery必须放在最前面，而后是bootstrap，顺序不能颠倒。安全

Bootstrap官网(Bootstrap 4.0版本)给出了的模板，以下：

（ 连接为 : v4.bootcss.com/docs/4.0/ge… ）

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

复制代码

涉及到bootstrap-table，bootstrap-table-zh-CN(汉化)，给出正确的导入顺序，以下：

<script src="${pageContext.request.contextPath}/js/jquery-3.1.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-table-zh-CN.min.js"></script>
复制代码

<2> js文件重复导入

在同一个html或jsp文件中，js文件通常不会重复导入，没有人会这么干，除非先后放置位置不一样，没有发现，删掉重复的js便可。

通常出现js文件重复导入都是在html或jsp文件有嵌套的状况，以下所示：

index.jsp文件 : 已经导入了bootstrap相关js文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello, RangDanDanFei</title>
</head>
<body>
<%@ include file="/jsp/head.jsp" %>
<h1>Hello, RangDanDanFei</h1>

<script src="${pageContext.request.contextPath}/js/jquery-3.1.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-table-zh-CN.min.js"></script>
</body>
</html>
复制代码

head.jsp文件 : 重复导入了bootstrap相关js文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="panel panel-default">
    <div class="panel-heading"></div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-2"></div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/js/jquery-3.1.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-table-zh-CN.min.js"></script>
复制代码

<3> 没有初始化bootstrapTable，直接refresh

Stack Overflow有该问题的描述以及解答，连接地址为：stackoverflow.com/questions/5…

<4> bootstrap版本和bootstrap-table版本不匹配

尝试升级其中一个版本

3. input文本框禁止输入

有两种方式：

<1> 增长readonly属性：表示该输入域只能读，不能写，可复制，可选择，可接收焦点，后台会接收到传值。

<input type="text" name="inputname" readonly="readonly" />

注意：readonly属性只能与type="text"配合使用
复制代码

<2> 增长disabled属性：不可编辑，不可选择，不能接收焦点，后台不会接收到传值，页面显示置灰。

<input type="text" name="inputname" disabled="disabled" /> 
复制代码

4. input文本框自动清除用户输入记录

增长autocomplete="off"属性，便可在每次从新请求页面时，自动清空用户输入记录。

<input type="text" autocomplete="off" />

相对应：
autocomplete="on"或者默认没有autocomplete属性，每次不会自动清空用户输入记录。
复制代码

5. input文本框输入值的监听

总结：

<1> 文本框输入完成，失去焦点，触发change事件监听：

$('#id').on('change', function() {...})
或 $('#id').change(function() {...})
或 $('#id').bind('change', function() {...});
复制代码

<2> 文本框输入值实时变化，触发input事件或者propertyChange事件监听：

$('#id').on('input propertychange', function() {...})
或
$('#id').bind('input propertychange', function() {...});
复制代码

<1> 失去焦点的监听：即在文本框输入完成后，将焦点切出，触发change事件

触发change事件，须要知足如下两个条件：

1. 当前对象属性改变，而且是由键盘或鼠标事件触发的（脚本触发的无效）
2. 当前对象失去焦点
复制代码

三种实现方式以下:

1. $('#id').on('change', function() {...});
2. $('#id').change(function() {...});
3. $('#id').bind('change', function() {...});

复制代码

扩展：

change事件还能够用于如下事件：

1. select选择框：选中项发生变化

2. checkbox复选框：选中状态发生变化
    <input type="checkbox" id="checkboxId" />

3. radio单选按钮：选中状态发生变化
    <div>
        <input type="radio" name="colors" value="red"/>红色<br>
        <input type="radio" name="colors" value="blue"/>蓝色<br>
        <input type="radio" name="colors" value="green"/>绿色<br>	
    </div>
复制代码

示例代码以下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>input文本框输入失去焦点的监听</title>
</head>
<body>
	<input type="text" id="textId" placeholder="请输入字符！" /><i id="textTip"></i>
	<br>

	<select id="selectId">
		<option value="bejing">北京</option>
		<option value="shanghai">上海</option>
		<option value="shenzhen">深圳</option>
	</select>
	<i id="selectTip"></i>
	<br>

	<input type="checkbox" id="checkboxId" /><i id="checkboxTip"></i>
	<br>

	<div id="radioId">
		请选择你喜欢的颜色！<br>
		<input type="radio" name="colors" value="red"/>红色<br>	
		<input type="radio" name="colors" value="blue"/>蓝色<br>
		<input type="radio" name="colors" value="green"/>绿色<br>	
	</div>
	<i id="radioTip"></i>
	
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script>
		$(document).ready(function() {
			$('#textId').on('change', function(){
				$('#textTip').html("共输入了 " + $(this).val().length + " 个字符！");
			});

			$('#selectId').on('change', function() {
				$('#selectTip').html("您选择的城市是" + $(this).find("option:selected").text());
			});

			$('#checkboxId').on('change', function() {
				if (document.getElementById("checkboxId").checked == true) {
					$('#checkboxTip').html("您已经选中");
				} else {
					$('#checkboxTip').html("您已经取消选择");
				}
			});

			$('#radioId').on('change', function() {
				var radios = document.getElementsByName('colors');
				for (var i = 0, len = radios.length; i < len; i++) {
					if (radios[i].checked) {
						$('#radioTip').html("您喜欢的颜色是" + radios[i].nextSibling.data);
						break;
					}
				}
			});
		});
	</script>
</body>
</html>
复制代码

失去焦点监听示例代码执行展现

<2> 实时监听：实时监听文本框中值的变化，触发input事件或者propertyChange事件

input事件：是HTML5的标准事件，通常浏览器都支持。当input的value发生变化时，不管是键盘输入、鼠标粘贴或脚本修改都能触发。IE9如下版本不支持input事件。

propertychange事件(IE专属)：只要当前对象属性发生改变，都会触发，不只仅会监听到input的value属性，还包括其余的属性标签，好比：span元素的style属性改变。同时在事件发生时还能够用 event.propertyName 访问到改变的属性名。

(因为IE9如下不支持input事件，因此要用到IE的专属propertychange事件)
复制代码

实现方式：

1. $('#id').on('input propertychange', function() {...});
2. $('#id').bind('input propertychange', function() {...});
复制代码

示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>input文本框输入实时监听</title>
</head>
<body>
	<input type="text" id="textId" placeholder="请输入字符！" /><i id="textTip"></i>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script>
		$(document).ready(function() {
			$('#textId').on('input propertychange', function() {
				$('#textTip').html("您已经输入了 " + $(this).val().length + " 个字符！");
			});
		});
	</script>
</body>
</html>
复制代码

实时监听示例代码执行展现

6. 获取表格指定的行，列

先看一下HTML构建简单表格的结构：

simple_table_structure

对简单表格操做总结：

  1. 获取表格行数
形式1： $('#tableId tr').length
形式2： $('#tableId').find('tr').length
复制代码
  1. 获取表格列数
形式1： $('#tableId th').length
形式2： $('#tableId tr:eq(1) td').length
形式3： $('#tableId tr:eq(1)').find('td').length
注意：表头行标签形式为：
<thead>
  <tr>
      <th></th>
      <th></th>
  </tr>
</thead>
<tr>中嵌套的标签是<th>，不是<td>
因此上面形式2，形式3中选择器:eq(index)的index值不是0，即跳过表头
复制代码
  1. 获取表格某一行的值
例如：获取表格第二行的值（表头算表的第一行）
形式1： $('#tableId tr:eq(1)').text();
形式2： $('#tableId tr').eq(1).text();
形式3： $('#tableId').find('tr').eq(1).text();
复制代码
  1. 获取表格某一行某一列的值
例如：获取表格第二行第一列的值（表头算表的第一行）
形式1： $('#tableIndex tr:eq(1) td:eq(0)').text()
形式2： $('#tableIndex tr').eq(1).find('td:eq(0)').text())
形式3： $('#tableIndex').find('tr').eq(1).find('td').eq(0).text())
复制代码

说明：

1. jQuery选择器:
<1> $('#tableId tr') 表示：匹配id为"tableId"的表格下的<tr>元素
<2> $(':eq(index)') 表示：选择器选取带有指定index值的元素，index值从0开始，全部第一个元素的index值是0
    若是index是负数，则从集合中的最后一个元素倒着往回计数
    例如：$('#tableId tr:eq(-1)') 表示：id为"tableId"的表格的倒数第一行

2. jQuery方法：
<1> .eq(index) 表示：匹配元素集合中索引为index的元素上，index值从0开始，表示第一个元素，
    若是index是负数，则从集合中的最后一个元素倒着往回计数
复制代码

代码示例：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <title>Hello, Simple Table!</title>
  </head>
  <body>
    <table id="usertable" border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>职业</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>让蛋蛋飞</td>
          <td>尼古拉斯蛋蛋</td>
          <td>程序员</td>
        </tr>
        <tr>
          <td>夏至未至</td>
          <td>李木子</td>
          <td>医生</td>
        </tr>
      </tbody>
    </table>
    <br>
    <div id="rowSize"></div>
    <div id="colSize"></div>
    <div id="tipth"></div>
    <div id="tiptr"></div>
    <div id="tiptd"></div>
    <div id="tiptrtd"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
      $(document).ready(function() {
        $('#rowSize').html("此表共" + $('#usertable tr').length + "行");
        $('#colSize').html("此表共" + $('#usertable th').length + "列");
        $('#tipth').html("此表表头的值为：" + $('#usertable th').text());
        $('#tiptr').html("此表第二行(表头为第一行)的值为：" + $('#usertable tr:eq(1)').text());
        $('#tiptd').html("此表第一列的值为：" + $('#usertable td:nth-child(1)').text());
        $('#tiptrtd').html("此表第三行第二列的值为：" + $('#usertable tr:eq(2) td:eq(1)').text());
      });
    </script>
  </body>
</html>
复制代码

simple_table 

说明：
:nth-child(n)是CSS3选择器，匹配属于其父元素的第 N 个子元素，不论元素的类型。不支持IE8及更早版本。

实例解析：
$('#usertable td:nth-child(1)')：在usertable表中td的父元素为tr，则td是子，tr是父，
表示匹配tr中第一个子元素td，表中有两行<tr>包含<td>，所以最终会匹配到usertable表中第一列的值（不含表头）。

延伸：
:nth-child(n)中 n 能够为公式，(an + b)表示：周期的长度，n是计数器(从0开始)，b是偏移量。
示例：指定了下标是3的倍数的全部p元素的背景色
p:nth-child(3n+0) {
    backgroup:#ff0000;
}
复制代码

7. 获取表格中控件的值

有两种方式：以#6中的表格为例（表头为第一行）

方式一：

例如：获取usertable表第二行中id="userid"或name="userid"的文本框(input text)的值
$('#usertable tr:eq(1)').find('#userid').val();
或者 
$('#usertable tr:eq(1)').find('input[name="userid"]').val();
复制代码

方式二：

例如：只知某表的某行中文本框组件id为"userid"，表的相关信息不知，想要获取该行中文本框name="userjob"的值
$('#userid').closest('tr').find('input[name="userjob"]').val();
复制代码

某表某行input id= 

说明：
jQuery的closest()方法：
.closest(selector) : 从当前元素开始，沿DOM树向上遍历，直到找到一个匹配selector的元素为止，而后返回一个包含该找到元素的jQuery对象。
（未找到的话，则返回0个）

实例解析：
$('#userid').closest('tr').find('input[name="userjob"]').val(): 选择器先匹配找到id="userid"的元素，
而后从该元素开始，沿DOM树向上找<tr>元素，匹配到一个后返回，即定位到了该行，
而后用find找出该行name="userjob"的文本框，取值。

延伸：
.closest(selector, DOMContext) : 表示从当前元素开始，在指定的DOM元素范围中遍历搜索。
示例：
DOM树结构以下：
<ul>
  <li id="i1">I1</li>
  <li id="i2">I2
    <ul>
      <li class="item-a">Item A</li>
      <li class="item-b">Item B</li>
      <li class="item-c">Item C</li>
    </ul>
  </li>
  <li id="i3">I3</li>
</ul>  

$('li.item-a').closest('ul', document.getElementById('i2')): 表示从Item A元素开始，指定遍历搜索的DOM范围是id="i2"的列表元素集合。
复制代码

8. 表头thead随表体tbody横向滚动

问题描述：

浏览器的窗口切换事后，发现表格的表头不随表体横向滚动，致使列标题与实际列数据错位。

解决方法：

  1. HTML编写的简单表格： 用<div>标签包裹<table>标签，并设置div的样式为：overflow-x: auto;

  2. bootstrapTable插件初始化的表格，去掉height属性

代码示例：

See the Pen thead_horizontal_scroll by rangdandanfei (@rangdandanfei) on CodePen.

9. 表头固定，不随滚动

现象描述：

当表格出现垂直滚动条时，让表头固定住，不随垂直滚动条上下移动。

表格垂直滚动时表头固定

解决方式：

方式一：BootstrapTable实现的table : 在<table>标签上增长data-height属性值，便可固定表头。【推荐这种方式】

<table id="table" data-toggle="table" data-height="460" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
说明：data-url用来给table提供数据
复制代码

BootstrapTable插件为咱们提供了很好示例，见官方连接：examples.bootstrap-table.com/#options/ta…

注意：使用data-height属性时，官方API给出了以下提示：

Note that if there are multiple tables on a page and the height option is set at the same time, you need to add the id attribute to each table, otherwise, the window resize will not work properly.

即：一个页面有多个表时，且表都设置了"data-height"属性值，则要给每一个表添加"id"属性，不然浏览器窗口大小切换调整，表格就不能正常工做。
复制代码

代码示例：

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css" rel="stylesheet">
    <title>BootstrapTable表头固定</title>
</head>
<body>
    <table id="table" data-toggle="table" data-height="460" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
        <thead>
            <tr>
                <th data-field="id">ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
        </thead>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
</body>
</html>
复制代码

方式二：头身分离法

基于Bootstrap的CSS样式实现头身分离，表头固定，不用js脚本：

  1. 使用两个<table>，一个只有表头<thead>，一个只有表体<tbody>，分别用<div>包裹

  2. 表体的div增长class="pre-scrollable"实现，即带滚动条

    表体的div增长style="height:100px; margin-top:-22px;"样式

说明：margin-top: 设置上边距，调整设置为一个负值，使表头div底线与表体div顶线重合，即两个表拼接成一个表
         当表行内容超过设置的heigh值时，出现垂直滚动条，这时上下滚动时，表头固定，表体随动。
复制代码

代码示例：

<!-- 导入bootstrap.css样式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Heading</th>
                <th>Heading</th>
                <th>Heading</th>
            </tr>
        </thead>
    </table>
</div>
<div class="pre-scrollable" style="height:100px; margin-top: -22px;">
    <table class="table table-striped table-hover">
        <tbody>
            <tr>
                <td>RowCell</td>
                <td>RowCell</td>
                <td>RowCellg</td>
            </tr>
            <tr>
                <td>RowCell</td>
                <td>RowCell</td>
                <td>RowCellg</td>
            </tr>
            <tr>
                <td>RowCell</td>
                <td>RowCell</td>
                <td>RowCellg</td>
            </tr>
        </thead>
    </table>
</div>
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程