表单事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单事件</title>
 6 </head>
 7 <body>
 8     <form action="">
 9         <input type="text" name="usr">
10         <button type="submit">提交</button>
11         <div></div>
12     </form>
13 </body>
14 <script type="text/javascript">
15     var form = document.querySelector(‘form‘)
16     var ipt = document.querySelector(‘input‘)
17     var btn = document.querySelector(‘button‘)
18     ipt.onselect = function () {
19         console.log(‘文本被选中‘);
20     };
21     var div = document.querySelector(‘div‘)
22     // ipt.oninput = function () {
23     //     console.log(‘值改变‘);
24     //     div.innerText = this.value
25     // };
26     // ipt.onkeyup = function () {
27     //     div.innerText = this.value
28     // }
29     // ipt.onchange = function () {
30     //     div.innerText = this.value
31     // }
32     form.onsubmit = function () {
33         console.log(‘提交‘)
34         return false;
35     }
36
37 </script>
38 </html>

原文地址:https://www.cnblogs.com/xuqidong/p/12113299.html

时间: 2024-07-30 11:23:59

表单事件的相关文章

jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 });   方法二:$ele.click( h

表单事件(jQuery)

1jQuery表单事件之blur与focus事件 在input元素上绑定keydown事件会发现一个问题: 每次获取的内容都是之前输入的,当前输入的获取不到 keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本 当浏览器捕获键盘输入时,还提供了一个keypress的响应,这个跟keydown是非常相似,这里使用请参考keydown这一节,具体说说不

javascript中的常用表单事件用法

下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="testform" action="#" id="form"> What is your name?<br /> <input type="text" name="fname" /> <in

常用的表单事件及用法

记录一下常用的表单事件,因为工作中常用到所以特别记录一下.有jq写法和原生js写法 1.这是select的option的事件,jq写法 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="../jquery-1.10.2.min.

jQuery-3.事件篇---表单事件

jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的本质区别: 是否支持冒泡处理 举个简单的例子 <div> <input type="text" /> </div> 其中input元素可以触发focus()事件 div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了foc

2018-06-25 js表单事件、三个高度和Ajax异步通讯技术

表单事件: onfocus -> 表单控件得到焦点时触发: obj_ipt.onfocus=function(){}; onblur -> 表单控件失去焦点时: onchange -> 表单控件内容被改变时: onselect -> 控件被选择时: onsubmit -> 当表单提交时: onreset -> 当表单重置时: 表单对象方法: select() -> 对象被选中: ipt_obj.select(); blur() -> 失去焦点 focus()

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

表单事件,、

表单事件 onblur//失去焦点时 onchange //内容被改边时 onfocus //获取焦点时 .oninput //用户输入时 onreset//当表单被重置时,作用于form标签 onselect//当内容被选中时 onsubmit //当表单被提交时,作用于form标签: 案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></ti

关于js中的表单事件

表单结构如下所示: <form > <input type="text" name="txt" id="txt" value="" /> <input type="submit" name="sub" id="sub" value="提交" /> <input type="button"