質問編集履歴

2 クラス

Tanaka2319

Tanaka2319 score 19

2019/06/09 10:36  投稿

Javascriptによるテキスト入力状態によるボタン有効化処理の実装について
下記のリンクにあるように、
「input要素やtextarea要素に文字が入力されたら有効になるリンクボタン」を実装したいです。
[入力による有効になるリンクボタン](https://www.webdlab.com/labs/form-input-textarea-2/)
```html
<div class="demo2">
<input type="text" id="input2" autocomplete="off">
<button type="button" id="submit2" value="送信" disabled>送信</button>
</div>
```
```javascript
window.addEventListener('DOMContentLoaded',function(){
document.getElementById('submit2').disabled = true;
document.getElementById('input2').addEventListener('keyup',function(){
if (this.value.length < 2) {
document.getElementById('submit2').disabled = true;
} else {
document.getElementById('submit2').disabled = false;
}
},false);
document.getElementById('input2').addEventListener('change',function(){
if (this.value.length < 2) {
document.getElementById('submit2').disabled = true;
}
},false);
},false);
```
このHTMLコードを.pugに変換した場合、下記のようなコードになるのですが、
```PUG
.demo2
 input#input2(type='text', autocomplete='off')
 button#submit2(type='button', value='送信', disabled='') 送信
```
ここで、
上記のjavascriptはどのタイミングで作動するのでしょうか?
てっきり、
```javascript
$("#input2").blur(××関数);
```
のように、特定の処理が施されたら作動するものと考えているのですが、
この場合特定の入力欄に全て入力された場合作動するため、
複数の記入項目が存在する場合、
全ての項目の#input2要素が記入された場合というのはどのように条件付すれば良いのでしょうか?
因みに  
```javascript  
$("#input2" + "#input2_1").blur(××関数);  
```  
のような形式だと、複数の記入項目のクラスが同時に呼び出された時、と見なされるのでしょうか?  
 
 
どなたかお力添えいただきたいです!
  • JavaScript

    38675 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    24938 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1 特に変更なし

Tanaka2319

Tanaka2319 score 19

2019/06/09 10:05  投稿

Javascriptによるテキスト入力状態によるボタン有効化処理の実装について
下記のリンクにあるように、
「input要素やtextarea要素に文字が入力されたら有効になるリンクボタン」を実装したいです。
[入力による有効になるリンクボタン](https://www.webdlab.com/labs/form-input-textarea-2/)
```html
<div class="demo2">
<input type="text" id="input2" autocomplete="off">
<button type="button" id="submit2" value="送信" disabled>送信</button>
</div>
```
```javascript
window.addEventListener('DOMContentLoaded',function(){
document.getElementById('submit2').disabled = true;
document.getElementById('input2').addEventListener('keyup',function(){
if (this.value.length < 2) {
document.getElementById('submit2').disabled = true;
} else {
document.getElementById('submit2').disabled = false;
}
},false);
document.getElementById('input2').addEventListener('change',function(){
if (this.value.length < 2) {
document.getElementById('submit2').disabled = true;
}
},false);
},false);
```
このHTMLコードを.pugに変換した場合、下記のようなコードになるのですが、
```PUG
.demo2
input#input2(type='text', autocomplete='off')
button#submit2(type='button', value='送信', disabled='') 送信
```
ここで、
上記のjavascriptはどのタイミングで作動するのでしょうか?
てっきり、
```javascript
$("#input2").blur(××関数);
```
のように、特定の処理が施されたら作動するものと考えているのですが、
この場合特定の入力欄に全て入力された場合作動するため、
複数の記入項目が存在する場合、
全ての項目の#input2要素が記入された場合というのはどのように条件付すれば良いのでしょうか?
どなたかお力添えいただきたいです!
  • JavaScript

    38675 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    24938 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る