input点击事件不能用(input输入结束触发事件)

今天项目上用到了oninput事件,顺便就记录下表单常用事件。

1.onblur:元素失去焦点时触发

Onblur经常用于表单验证,所有主要浏览器都支持 onblur 事件

<inputtype=”text”onblur=”myFunction()”>支持该事件的 HTML 标签:<a>,<acronym>,<address>,<area>,<b>,<bdo>,<big>,<blockquote>,<button>,<caption>,<cite>,<dd>,<del>,<dfn>,<div>,<dl>,<dt>,<em>,<fieldset>,<form>,<frame>,<frameset>,<h1>to<h6>,<hr>,<i>,<iframe>,<img>,<input>,<ins>,<kbd>,<label>,<legend>,<li>,<object>,<ol>,<p>,<pre>,<q>,<samp>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>
input点击事件不能用(input输入结束触发事件)

2.onchange:表单元素的内容改变时触发

当用户改变input输入框内容时执行,也可用于单选框与复选框改变后触发的事件,所有主要浏览器都支持。

<inputtype=”text”onchange=”myFunction()”>支持该事件的 HTML 标签:<inputtype=”text”>,<select>,<textarea>

3.onfocus:元素获取焦点时触发

当 input 输入框获取焦点时执行,通常也用于 <input>, <select>, 和<a>,所有主要浏览器都支持 onfocus 事件。

<inputtype=”text”onfocus=”myFunction()”>

支持该事件的 HTML 标签:<a>,<acronym>,<address>,<area>,<b>,<bdo>,<big>,<blockquote>,<button>,<caption>,<cite>,<dd>,<del>,<dfn>,<div>,<dl>,<dt>,<em>,<fieldset>,<form>,<frame>,<frameset>,<h1>to<h6>,<hr>,<i>,<iframe>,<img>,<input>,<ins>,<kbd>,<label>,<legend>,<li>,<object>,<ol>,<p>,<pre>,<q>,<samp>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>

4.onfocusin:元素即将获取焦点时触发

onfocusin 事件在一个元素即将获得焦点时触发,onfocusin 事件类似于 onfocus 事件。主要的区别是 onfocus 事件不支持冒泡。因此,如果你想知道元素或者其子元素是否获取焦点,需要使用 onfocusin 事件。

<inputtype=”text”onfocusin=”myFunction()”>

支持该事件的 HTML 标签:<a>,<acronym>,<address>,<area>,<b>,<bdo>,<big>,<blockquote>,<button>,<caption>,<cite>,<dd>,<del>,<dfn>,<div>,<dl>,<dt>,<em>,<fieldset>,<form>,<frame>,<frameset>,<h1>to<h6>,<hr>,<i>,<iframe>,<img>,<input>,<ins>,<kbd>,<label>,<legend>,<li>,<object>,<ol>,<p>,<pre>,<q>,<samp>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>

提示:虽然 Firefox 不支持 onfocusin 事件, 但你可以通过使用 onfocus (使用addEventListener()方法的可选参数 useCapture)的捕获监听事件来查看元素或其子元素是否获取焦点。

5.onfocusout:元素即将失去焦点时触发

onfocusout 事件在元素即将失去焦点时触发。onfocusout 事件类似于 onblur 事件。主要的区别是 onblur 事件不支持冒泡。因此,如果你需要查看元素或其子元素是否获取焦点,需要使用 onfocusout 事件。

<inputtype=”text”onfocusout=”myFunction()”>支持该事件的 HTML 标签:<a>,<acronym>,<address>,<area>,<b>,<bdo>,<big>,<blockquote>,<button>,<caption>,<cite>,<dd>,<del>,<dfn>,<div>,<dl>,<dt>,<em>,<fieldset>,<form>,<frame>,<frameset>,<h1>to<h6>,<hr>,<i>,<iframe>,<img>,<input>,<ins>,<kbd>,<label>,<legend>,<li>,<object>,<ol>,<p>,<pre>,<q>,<samp>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>

提示:虽然 Firefox 不支持 onfocusout 事件, 但你可以通过使用 onfocus (使用addEventListener()方法的可选参数 useCapture)的捕获监听事件来查看元素或其子元素是否失去焦点。

6.oninput:元素获取用户输入时触发

oninput 事件在用户输入时触发,也可用于 <textarea> 元素的值发生改变时触发。该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

<inputtype=”text”oninput=”myFunction()”>支持该事件的 HTML 标签:<input><textarea>

7.onsearch:用户向搜索域输入文本时触发

<inputtype=”search”onsearch=”myFunction()”>支持该事件的 HTML 标签:<inputtype=”search”>

8.onselect:用户选取文本时触发

onselect 事件会在文本框中的文本被选中时发生。

<inputtype=”text”onselect=”myFunction()”>

支持该事件的 HTML 标签:<inputtype=”text”>,<textarea>

发表评论

登录后才能评论