oninput事件

    
  
在文本框中尝试输入触发函数。
  
   

定义和用法

oninput 事件在用户输入时触发。

该事件在 或 元素的值发生改变时触发。</p> <p><strong>提示：</strong>该事件类似于onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。</p> <hr> <h2>浏览器支持</h2> <p>表格中的数字表示支持该事件的第一个浏览器的版本号。</p> <table class="browserref"> <tbody> <tr class="firstRow"> <th style="width:20%;font-size:16px;text-align:left;">事件</th> <th style="width:16%;" class="bsChrome" title="Chrome"><br></th> <th style="width:16%;" class="bsIE" title="Internet Explorer"><br></th> <th style="width:16%;" class="bsFirefox" title="Firefox"><br></th> <th style="width:16%;" class="bsSafari" title="Safari"><br></th> <th style="width:16%;" class="bsOpera" title="Opera"><br></th> </tr> <tr> <td style="text-align:left;">oninput</td> <td>Yes</td> <td>9.0</td> <td>4.0</td> <td>5.0</td> <td>Yes</td> </tr> </tbody> </table> <br> <hr> <h2>语法</h2> <p>HTML 中:</p> <div class="code"> <div> < <em>element</em>oninput=" <em>myScript</em>">尝试一下 </div> </div> <p>JavaScript 中:</p> <div class="code"> <div> <em>object</em>.oninput=function(){ <em>myScript</em>};尝试一下 </div> </div> <p>JavaScript 中, 使用 addEventListener() 方法:</p> <div class="code"> <div> <em>object</em>.addEventListener("input", <em>myScript</em>);尝试一下 </div> </div> <p><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。</p> <hr> <h2>技术细节</h2> <table class="tecspec"> <tbody> <tr class="firstRow"> <th style="width:30%">是否支持冒泡:</th> <td>Yes</td> </tr> <tr> <th style="width:30%">是否可以取消:</th> <td>No</td> </tr> <tr> <th style="width:30%">事件类型:</th> <td>Event</td> </tr> <tr> <th style="width:30%">支持的 HTML 标签:</th> <td><input type="password">, <input type="search">, <input type="text"> 和 <textarea></td> </tr> </tbody> </table> <br> <p><br></p> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/ja/jsref/prop-document-documenturi.html" rel="prev">HTML DOM documentURI 属性</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/ja/jsref/event-relatedtarget.html" rel="next">relatedTarget 事件属性</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>チュートリアルのナビゲーション</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" target="_blank" title="大きなフロントエンド">大きなフロントエンド</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="HTML">HTML</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="反応する">反応する</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="アヤックス">アヤックス</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="ブートストラップ">ブートストラップ</a> <a href="//m.sbmmt.com/ja/course/list/1/type/3.html" title="財団">財団</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/2/type/3.html" title="ハイチャート">ハイチャート</a> <a href="//m.sbmmt.com/ja/course/list/2/type/3.html" title="マップAPI">マップAPI</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" target="_blank" title="バックエンド開発">バックエンド開発</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ララベル">ララベル</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="パイソン">パイソン</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="行く">行く</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ジャワ">ジャワ</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="JSP">JSP</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ジャンゴ">ジャンゴ</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ルビー">ルビー</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="パール">パール</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="サーブレット">サーブレット</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="ルア">ルア</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="スカラ座">スカラ座</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="AppML">AppML</a> <a href="//m.sbmmt.com/ja/course/list/3/type/3.html" title="VBスクリプト">VBスクリプト</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" target="_blank" title="データベース">データベース</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="レディス">レディス</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="オラクル">オラクル</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="モンゴDB">モンゴDB</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="Memcached">Memcached</a> <a href="//m.sbmmt.com/ja/course/list/4/type/3.html" title="SQLサーバー">SQLサーバー</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" target="_blank" title="携帯端末">携帯端末</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="アプレット">アプレット</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="ユニアプリ">ユニアプリ</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="フラッター">フラッター</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="アンドロイド">アンドロイド</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="迅速">迅速</a> <a href="//m.sbmmt.com/ja/course/list/5/type/3.html" title="他の">他の</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" target="_blank" title="運用保守開発">運用保守開発</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="ドッカー">ドッカー</a> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="ギット">ギット</a> <a href="//m.sbmmt.com/ja/course/list/9/type/3.html" title="その他のツール">その他のツール</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" target="_blank" title="UIデザイン">UIデザイン</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" title="アフレ">アフレ</a> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" title="ウェブフォーム">ウェブフォーム</a> <a href="//m.sbmmt.com/ja/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" target="_blank" title="コンピューターの基本">コンピューターの基本</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="デザインパターン">デザインパターン</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="正規表現">正規表現</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="ウェブサイト構築ガイド">ウェブサイト構築ガイド</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="ブラウザ情報">ブラウザ情報</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="ウェブサイトのホスト">ウェブサイトのホスト</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/ja/course/list/10/type/3.html" title="コードベーシック">コードベーシック</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XML DOM">XML DOM</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XPath">XPath</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XQuery">XQuery</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="Xリンク">Xリンク</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="Xポインタ">Xポインタ</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XMLスキーマ">XMLスキーマ</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/ja/course/list/6/type/3.html" title="SVG">SVG</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" target="_blank" title="ウェブサービス">ウェブサービス</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="ウェブサービス">ウェブサービス</a> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="石鹸">石鹸</a> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/ja/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="提出する">提出する</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>