JavaScriptで特定のIDまたはClassのInputにonkeyupを追加したい

Question

フォームのinputフィールドに"onkeyup"を追加したいのですが、HTML・PHPを直接編集出来ない環境となります。
CSSやJavaScriptを読み込ませる事は可能です。

そこで下記の様なフィールドにJavaScriptにてonkeyupを追加する事は可能なのでしょうか？

<input type="text" name="hoge" id="hoge">

IDまたはClassを指定して出力の際にonkeyupを追加出来ればと考えております。

希望の出力例としては下記のものです。onkeyup="_______"の箇所をJSで追加したい形です。

<input type="text" name="hoge" id="hoge" onkeyup="_______">

どなたかご教授頂ければ幸いです。

Answer 1

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#hoge').addEventListener('keyup',function(e){
    console.log("hoge");
  });
});

を外部ファイルとして読み込む

Comments

[MATRIX]

今回は別の方法で実装できましたが、
早速のご回答頂き誠にありがとうございました。

Answer 2

addEventListenerでkeyupイベントとアクションを指定すればできます。

Comments

[dice142]

ただ、HTML編集できないけどJavaScriptを読み込ませることはできるというのは危険な気もしますが。

[MATRIX]

今回は別の方法で実装できましたが、
早速のご回答頂き誠にありがとうございました。

Answer 3

querySelectorかquerySelectorAllで要素を取得して、addEventListenerでイベントを受け取ればできます。

【Document.querySelector() - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

【Document.querySelectorAll() - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

【EventTarget.addEventListener() - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

もしくは要素を取得した時点でonkeyup属性をsetAttribute で書き換えることでも実現できます。

【element.setAttribute - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute

Comments

[MATRIX]

4つ目のリンクの例、setAttributeを使用して対応出来ました。
ご回答頂き誠にありがとうございました。

Answer 4

下記のコードで解決できました。
フォームの後の読み込みにて

var d = document.getElementById("hoge"); 
d.setAttribute("onkeyup", "______");