html中实现回车或点击进入-----Mr.Zhang
首先,允许我这么称呼它们两个为兄弟。之所以这么称呼,是因为它们之间执行的是相同的任务----- 点击按钮。
然而,它们也有不同之处,次不同之处又使得它们貌似有些调用的意思。
接下来,让我来给大家说一下二者的关系,我们不妨举个例子来说明:
请看如下代码:
<div class="content_login"><input name="username" type="text" id="username" /><input name="password" type="password" id="password"οnkeydοwn='if(event.keyCode==13){loginbutton.click()}' /><div class="login_minu" id="loginbutton" οnclick="authen()"></div>
</div>
此代码为登录界面,两个输入框:一个为输入名字,另一个为输入密码。一个button ,id为loginbutton。至于这个button是什么样,我们暂时不用管,只知道他在类login_minu中定义就行。
要想实现回车或点击进入,那肯定是输入完后的事情,因此我在输入完密码后进行回车或点击事件。这就用到了click()和onclick()函数。这里我们用到了event.keyCode==13,此为javascript中的件键盘按回车键的code值(参考:http://www.okajax.com/a/200811/1124R022008.html)。它所表示的就是在键盘上按回车,html中按下键盘事件onkeydown,这里我们多说点html事件属性(以下来源于w3school)
窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
属性 | 值 | 描述 |
---|---|---|
onload | 脚本 | 当文档被载入时执行脚本 |
onunload | 脚本 | 当文档被卸下时执行脚本 |
表单元素事件 (Form Element Events)
仅在表单元素中有效。
属性 | 值 | 描述 |
---|---|---|
onchange | 脚本 | 当元素改变时执行脚本 |
onsubmit | 脚本 | 当表单被提交时执行脚本 |
onreset | 脚本 | 当表单被重置时执行脚本 |
onselect | 脚本 | 当元素被选取时执行脚本 |
onblur | 脚本 | 当元素失去焦点时执行脚本 |
onfocus | 脚本 | 当元素获得焦点时执行脚本 |
图像事件 (Image Events)
该属性可用于 img 元素:
属性 | 值 | 描述 |
---|---|---|
onabort | 脚本 | 当图像加载中断时执行脚本 |
键盘事件 (Keyboard Events)
在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
属性 | 值 | 描述 |
---|---|---|
onkeydown | 脚本 | 当键盘被按下时执行脚本 |
onkeypress | 脚本 | 当键盘被按下后又松开时执行脚本 |
onkeyup | 脚本 | 当键盘被松开时执行脚本 |
鼠标事件 (Mouse Events)
在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
属性 | 值 | 描述 |
---|---|---|
onclick | 脚本 | 当鼠标被单击时执行脚本 |
ondblclick | 脚本 | 当鼠标被双击时执行脚本 |
onmousedown | 脚本 | 当鼠标按钮被按下时执行脚本 |
onmousemove | 脚本 | 当鼠标指针移动时执行脚本 |
onmouseout | 脚本 | 当鼠标指针移出某元素时执行脚本 |
onmouseover | 脚本 | 当鼠标指针悬停于某元素之上时执行脚本 |
onmouseup | 脚本 | 当鼠标按钮被松开时执行脚本 |
click()函数其实就是模拟单击按下。用法是buttonid.click()。onclick则是单击按钮的事件了,此为方法,因此我们可以将单击事件赋值给它,这样我们就完成了回车或单击进入的效果。
html中实现回车或点击进入-----Mr.Zhang相关推荐
- html增加点击进入,html中实现回车或点击进入-----Mr.Zhang
首先,允许我这么称呼它们两个为兄弟.之所以这么称呼,是因为它们之间执行的是相同的任务----- 点击按钮. 然而,它们也有不同之处,次不同之处又使得它们貌似有些调用的意思. 接下来,让我来给大家说一下 ...
- angularjs中按回车事件_浅谈angularjs中响应回车事件
下面这个示例在输入框键入回车键或者点击按钮时,将输入框的值置为"Hello World!":(黄色背景内容为响应回车事件涉及到的代码) angularjs-demo test va ...
- vue项目中的回车登录
vue项目中的回车登录:(搭配element ui 的使用 如果是原生,@keyup.enter="login(form)"就可以了) 在密码框上加代码:v-model=" ...
- Word 如何删除页面中的回车符 / 段落标记
笔记本电脑在使用 Word 时,发现页面中的回车符无法去除,即使已经点击了选项卡中的回车符按钮 解决方案 最终效果: 现在页面中的回车符是否显示可通过选项卡中的回车符按钮操控了
- word删除多余换行_批量删除Word中多余回车
有时候我们从网页上复制一些文章到Word中时,往往会带有好多向下箭头的符号,这就是软回车符号(Word中软回车是同时按住shift+enter得来的), 这些软回车占用了Word很多的空间,那么如何才 ...
- 解决按钮点击后长按回车无限触发点击事件问题
思路: 包一层 UI 库的 button,在里面监听 onkeydown 和 onkeyup,用 flag 阻止长按回车一直触发. 然后在项目全局重新注册 el-button 覆盖掉UI内的按钮组件. ...
- python使用textwrap包在已经生成的长字符串中嵌入回车符实战
python使用textwrap包在已经生成的长字符串中嵌入回车符实战 目录 python使用textwrap包在已经生成的长字符串中嵌入回车符实战 # textwrap包在长字符串中嵌入回车符 #实 ...
- c++图形中如何判断鼠标点击在一条直线上_PS教程:十种抠图方法【上】
今天的关键字是"抠图" 日常工作生活中大家可能经常会用到抠图的技能 方法很多 包括使用美图秀秀等 我之前也分享过比如利用ppt如何抠图 那么今天就来给大家介绍十种用ps抠图的方法: ...
- Openlayers中使用Overlay实现点击要素显示html内容弹窗并且动态更改弹窗内容
场景 Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动: Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动_BADAO_LIUMANG_QIZHI的博客 ...
最新文章
- python读取浮点数与源文件不同
- 调用系统函数向进程发信号core
- sonar.exclusions 配置无效问题
- 使用 FieldMask 提高 C# gRpc 服务性能
- 如何有效解决C与C++的相互调用问题
- 小程序背景图满屏_竞赛答题小程序
- Solidity基础入门知识---函数的访问权限和可见性
- 关于绑定事件的一个疑惑
- Win10值得推荐的软件,提升效率和桌面美观
- ARM-Linux 交叉编译工具链安装
- DirectX修复工具 4.0 标准版
- 粪斗这杆大旗下,注定只是少部分人的盛宴
- analyze 命令
- 期权定价模型之Heston模型--参数校准与定价【附python代码】
- wakeup_in休眠唤醒
- CleanMyMacX4.11.3最新版mac电脑磁盘清理工具功能
- 【Kubernetes】Pod学习(五)从Pod到容器:Downward API
- 关于批量下载MODIS数据的坑
- Feign原理以及feign调优
- 虚拟机VMware Workstation安装使用教程
热门文章
- 2017.9.7 翻硬币 失败总结
- 2017.3.27 生成魔咒 思考记录(有史以来最不容易)
- 【英语学习】【Daily English】U15 Culture L04 When in Rome, do as the Romans Do
- 【英语学习】【WOTD】inexorable 释义/词源/示例
- 【英语学习】【WOTD】gibbous 释义/词源/示例
- okhttp请求php接口,安卓:okhttp请求,获取返回数据
- python省市区三级联动_Ajax实现省市区三级级联详解
- Keras-10 模型可视化
- watchOS更新后 Apple Watch 4心电图功能已开始支持欧洲用户
- UVA1437 String painter