前端调试指南指北
2019-09-14 本文已影响0人
程序猿蛋蛋哥
1. 防止input回车提交表单Form
描述： form表单中存在button和table，table中含有input搜索框，在input中输入内容后，按回车键(Enter键)，会自动触发form表单提交。
form主要代码如下：
<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键)将触发提交。
当button的type="button"时，input文本框输入后，按回车键不会触发提交。
代码简单示例：form表单中含table也是类似的情况
<!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文件重复导入
<3> 没有初始化bootstrapTable，直接refresh
<4> bootstrap版本和bootstrap-table版本不匹配
<1> jQuery和bootstrap顺序颠倒
引入js时，jQuery必须放在最前面，然后是bootstrap，顺序不能颠倒。
Bootstrap官网(Bootstrap 4.0版本)给出了的模板，如下：
（ 链接为 : https://v4.bootcss.com/docs/4.0/getting-started/introduction/ ）
<!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有该问题的描述以及解答，链接地址为：https://stackoverflow.com/questions/56160322/typeerror-bootstraptable-is-not-a-function
<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>
实时监听示例代码执行展示
