Q&A
ファイル名はコードブロック外に出してもらえると助かります。
（こちらで確認する際に削除する手間が発生します）
JS
1window.addEventListener('DOMContentLoaded',function(){ 2document.getElementById('submit1').disabled = true; 3document.getElementById('input1').addEventListener('keyup',function(){ 4if (!(document.getElementById('input1').value)) { 5document.getElementById('submit1').disabled = true; 6} else { 7document.getElementById('submit1').disabled = false; 8} 9},false); 10document.getElementById('input1').addEventListener('change',function(){ 11if (!(document.getElementById('input1').value)) { 12document.getElementById('submit1').disabled = true; 13} 14},false); 15},false); 16 17function funTest2() { 18 document.getElementById('input1').value = "test"; 19}
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>CSS練習</title> 6</head> 7<body> 8 <div id="headline"> 9 <h1>入力エリア</h1> 10 <input type="text" id="input1" value="" disabled/> 11 <input type="button" value="値セット" onclick="funTest2()"/> 12 <input type="button" id="submit1" value="テスト" onclick=""/> 13 </div> 14 15</body> 16<script type="text/javascript" src="./js/jquery/jquery-3.4.1.min.js"></script> 17<script type="text/javascript" src="./test.js"></script> 18 19</html> 20
こんばんわ。
下記にような処理をHTML実装したくて、disabled属性が付いているテキストボックスのvalue値に
よって条件分岐をさせたいのですが、うまくいきません。
readonlyは諸事情によりできないので、disabled属性がついたまま、実現できる方法を教えていただけないでしょうか。
よろしくお願いいたします。
●処理
初期表示：テストボタンは非活性
①値セットボタンを押下すると、テキストボックスに値がセット。
②テストボタンが活性化。（テキストボックスに値がセットされている間は活性）
あと、disabledではkeyup発生しないでしょうし、
入力もできないなら「値セットボタンを押すとテストボタンが活性化」で良いのでは？
返信が遅くなり、申し訳ありません。
ご指摘の通り、ファイル名を削除しました。
また、ご回答いただいた通り、「値ボタンを押すとテストボタンが活性化」にしました。
ご回答、ありがとうございました。
回答1件
0
そもそもvalueプロパティを書き換えてもkeyupは発生しませんよね
投稿2020/10/23 00:58
総合スコア116724
HTMLElement.prototype.trigger=function(eventStr){
var e = document.createEvent("HTMLEvents");
e.initEvent(eventStr, true, true );
return this.dispatchEvent(e);
};
を宣言しておいて
function funTest2() {
document.getElementById('input1').value = "test";
document.getElementById('input1').trigger('keyup');
}
のように呼び出してください
返信が遅くなり申し訳ありません。
ご回答いただき、ありがとうございます。
ご回答の通り、コード修正しましたが、テストボタンが活性化しませんでした。。。
他に記述する箇所があれば教えてただけると幸いです。
あなたの回答
tips
プレビュー
