js 如何控制文本域输入内容在一定间隔时间段才触发事件查询相关数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 如何控制文本域输入内容在一定间隔时间段才触发事件查询相关数据相关的知识，希望对你有一定的参考价值。
文本域自身设置每按一键就触发一次js 函数进行查询相关数据,现在要控制按键在一定时间段内(大于1秒间隔时间)才触发一次js 函数,比如现在需要输入20110109001.而输入
200101每按一键时间都在1秒以内,而输入09001每次按键时间亦在1秒钟以内.而输入
200101后隔了一秒多才输入09001,所以在输入20110109001整个过程应该是输入200101后查询了一次数据直到输入完20110109001后又触发了js查询了一次数据,一共触发了两次,而不是每键一键就触发一次查询数据,目的控制不要每次都去查询数据.
不可以,必须按键就要实现模糊查询功能,但连续按就没有必须去查询,等停下来超过1秒后才进行查询
追答那就就用onkeyup函数来处理，函数里面进行时间的判断，javascript中有date函数和数组，用这2个可以处理。
我写了个简单的demo，希望对你有帮助
New Document
var time = new Array();
var i=0;//全局变量i
function test()
time[i] = new Date().getTime();//每次点击的时间都记录下来放在数组中，执行完后i加一，当数组中有2个值时，判断这次时间和上次时间的差值
if(i>0)
if(time[i]-time[i-1]>1000)//javascript 的geTime()得到的是毫秒数，因此如果要大于一秒才alert()话，差值是1000
alert('ee')
i++;
<script>
var flag = 0;
var t;
function openFlag ()
t = setTimeout(function()flag = 1; dosomething();, 1000);
function closeFlag()
clearTimeout(t);
flag = 0;
function dosomething()
if (flag)
// do something
alert('aaa');
</script>
<input type="text" onkeyup="openFlag()" onkeydown="closeFlag()" />本回答被提问者采纳
HTMLHTML 注册表单案例 ② ( 表格中的内容设置 | 下拉列表 | 输入文本框 | 复选框 | 文本域 | 图片按钮 | 链接 )
文章目录
一、表格中的内容设置
1、设置下拉列表
下拉列表 写在 td 单元格 标签 中 , 外层使用 <select> 标签 , 内层使用 <option> 标签 ;
代码示例 :
<!-- 第二行数据 -->
<tr>
<!-- 第二行第一列 -->
<td>籍贯</td>
<td>
<!-- 下拉列表 -->
<!-- 省份选择 -->
<select>
<option>--请选择省--</option>
<option>河北省</option>
<option>山东省</option>
<option>河南省</option>
<option>山西省</option>
</select>
<!-- 地区选择 -->
<select>
<option>--请选择市--</option>
<option>衡水市</option>
<option>邢台市</option>
<option>保定市</option>
<option>邯郸市</option>
</select>
<!-- 县选择 -->
<select>
<option>--请选择县--</option>
<option>冀州区</option>
<option>枣强市</option>
<option>深州市</option>
<option>桃城区</option>
</select>
</td>
</tr>
运行效果 :
2、设置输入文本框
在 td 标签中 , 使用 input 表单 , 设置表单类型为 text , 并通过 value 属性设置提示信息 ;
代码示例 :
<!-- 第三行数据 -->
<tr>
<td>邮箱</td>
<td>
<input type="text" value="请输入邮箱">
</td>
</tr>
展示效果 :
3、设置复选框
在 表格中的 td 标签中 , 设置 复选框 ,
将 input 表单类型设置为 checkbox , 为其设置不同的 name 用于识别复选框 ,
复选框后面跟着 选项名称 ;
代码示例 :
<!-- 第四行数据 -->
<tr>
<td>关注领域</td>
<td>
<input type="checkbox" name="like1"> 移动开发
<input type="checkbox" name="like2"> 后端开发
<input type="checkbox" name="like3"> 前端开发
</td>
</tr>
展示效果 :
4、设置文本域
在表格中的 td 标签中 , 设置 文本域 ;
文本域标签为 textarea 标签 , 使用 cols 属性设置每行的字符个数 , 使用 rows 设置行数 ;
代码示例 :
<!-- 第五行数据 -->
<tr>
<td>个人简介</td>
<td>
<textarea cols="50" rows="5"> </textarea>
</td>
</tr>
展示效果 :
5、设置图片按钮
在表格的 td 单元格中 , 设置 input 表单 , type 类型设置为 image 类型 , src 设置图片的 相对路径 ;
要将 图片按钮与 第二列 进行对齐 , 在该行表格中 , 第一个单元格 需要空出来 , 只在第二个单元格中设置图片按钮 ;
代码示例 :
<!-- 第六行数据 -->
<tr>
<td></td>
<td>
<input type="image" src="images/btn.png" />
</td>
</tr>
运行效果 :
6、设置链接
在表格的 td 单元格中 , 通过 a 标签 设置 链接 , 链接目的地在 href 属性值中设置 ;
要将 链接与 第二列 进行对齐 , 在该行表格中 , 第一个单元格 需要空出来 , 只在第二个单元格中设置链接 ;
代码示例 :
<!-- 第七行数据 -->
<tr>
<td></td>
<td>
<a href="https://www.baidu.com/">已有账号，立即登录</a>
</td>
</tr>
执行效果 :
二、完整代码示例
完整代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>用户注册</title>
<base target="_blank"/>
</head>
<body>
<!-- 设置表格宽度 600 像素, 表格居中 -->
<table width="600" align="center" border="1">
<!-- 设置表格标题 -->
<caption><h3>用户注册信息</h3></caption>
<!-- 第一行数据 -->
<tr>
<!-- 第一行第一列 -->
<td>性别</td>
<td>
<!-- 单选按钮 选择性别 -->
<input type="radio" name="sex" checked="checked" />
<img src="images/man.jpg" /> 男
<input type="radio" name="sex" />
<img src="images/women.jpg" /> 女
</td>
</tr>
<!-- 第二行数据 -->
<tr>
<!-- 第二行第一列 -->
<td>籍贯</td>
<td>
<!-- 下拉列表 -->
<!-- 省份选择 -->
<select>
<option>--请选择省--</option>
<option>河北省</option>
<option>山东省</option>
<option>河南省</option>
<option>山西省</option>
</select>
<!-- 地区选择 -->
<select>
<option>--请选择市--</option>
<option>衡水市</option>
<option>邢台市</option>
<option>保定市</option>
<option>邯郸市</option>
</select>
<!-- 县选择 -->
<select>
<option>--请选择县--</option>
<option>冀州区</option>
<option>枣强市</option>
<option>深州市</option>
<option>桃城区</option>
</select>
</td>
</tr>
<!-- 第三行数据 -->
<tr>
<td>邮箱</td>
<td>
<input type="text" value="请输入邮箱">
</td>
</tr>
<!-- 第四行数据 -->
<tr>
<td>关注领域</td>
<td>
<input type="checkbox" name="like1"> 移动开发
<input type="checkbox" name="like2"> 后端开发
<input type="checkbox" name="like3"> 前端开发
</td>
</tr>
<!-- 第五行数据 -->
<tr>
<td>个人简介</td>
<td>
<textarea cols="50" rows="5"> </textarea>
</td>
</tr>
<!-- 第六行数据 -->
<tr>
<td></td>
<td>
<input type="image" src="images/btn.png" />
</td>
</tr>
<!-- 第七行数据 -->
<tr>
<td></td>
<td>
<a href="https://www.baidu.com/">已有账号，立即登录</a>
</td>
</tr>
</table>
</body>
</html>
展示效果 :
以上是关于js 如何控制文本域输入内容在一定间隔时间段才触发事件查询相关数据的主要内容，如果未能解决你的问题，请参考以下文章
JS事件 内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
文本域输入汉字 第二个文本域立即显示汉字的获取首个字母 如何用JS实现