8288分类目录 8288分类目录 8288分类目录
  当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

【基础】input标签输入框内的输入事件详细分析

来源:本站原创 浏览:68次 时间:2022-11-30

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

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

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

<input type="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>

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

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

<input type="text" onchange="myFunction()">

支持该事件的 HTML 标签:

<input type="text">, <select>, <textarea>

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

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

<input type="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 事件。

<input type="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 事件。

<input type="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> 元素。

<input type="text" oninput="myFunction()">

支持该事件的 HTML 标签:

<input> <textarea>

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

onsearch 事件在用户按下"ENTER(回车)" 按键或点击 type="search" 的 <input> 元素的 "x(搜索)" 按钮时触发。

<input type="search" onsearch="myFunction()">

支持该事件的 HTML 标签:

<input type="search">

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

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

<input type="text" onselect="myFunction()">

支持该事件的 HTML 标签:

<input type="text">, <textarea>

  推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • 就要爱网站目录就要爱网站目录

    就要爱网站目录,按主题和类别列出网站。所有提交的网站都经过人工审查,确保质量和无垃圾邮件的结果。

    www.912219.com
  • 伍佰目录伍佰目录

    伍佰网站目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向伍佰目录推荐、提交优秀网站。

    www.wbwb.net