JS：テキストエリアで入力中にdivのクラスを変更し、何時でも入力しないでください

Question

私はテキストエリアを持っていて、自分のウェブページにボタンを送ります。

私が入力している間に、そして別のCSSクラスに入力していないうちに、（特定のCSSクラスに）送信ボタンのスタイルを変更する方法を教えてください。

また、メッセージが削除されると、送信ボタンのスタイルを元のCSSクラスに戻す必要があります。ここで

は、私が試したコードです：

function isTyping(val) { 
 
    if (val == 'true') { 
 
    document.getElementsByClassName('send')[0].innerHTML = "Class1"; 
 
    } else { 
 
    document.getElementsByClassName('send')[0].innerHTML = "Class2"; 
 
    
 
    } 
 
}

.type-message:focus + .send { 
 
    background-color: red; 
 
} 
 

 
.class1 { 
 
    display: block; 
 
    width: 50px; 
 
    height: 20px; 
 
    background-color: red; 
 
} 
 

 
.class2 { 
 
    display: block; 
 
    width: 50px; 
 
    height: 20px; 
 
    background-color: yellow; 
 
}

<textarea class="type-message" onkeypress="isTyping('true'); timer=5;" onkeyup="isTyping('false')" name="textarea" cols="45" rows="5"> 
 
</textarea> 
 

 
<div class="send">Class2</div>

しかし、それはない作品を行います。なにが問題ですか？

Answer 1

ソリューション：

Run CODE snippet &以下のタイプのテキストエリアが表示されます。

これはあなたがやりたいことであるかどうかを確認してください：あなたのコード内で

var delay = 3000; // that's 3 seconds of not typing 
 
var timer = null; 
 
function isTyping() { 
 
    clearTimeout(timer); 
 
    var value = document.getElementById('text').value; 
 
    if(value) { 
 
    document.getElementById('send').innerHTML = "Typing"; 
 
    document.getElementById("send").className = "typing"; 
 
    timer = setTimeout(notTyping, delay); 
 
    } 
 
    else { 
 
    notTyping(); 
 
    } 
 
} 
 

 
function notTyping() { 
 
    document.getElementById('send').innerHTML = "Not Typing"; 
 
    document.getElementById("send").className = "not-typing"; 
 
}

#send { 
 
    display: block; 
 
    width: 200px; 
 
    height: 20px; 
 
} 
 
.not-typing { 
 
    background-color: yellow; 
 
} 
 
.typing { 
 
    background-color: red; 
 
}

<textarea class="type-message" oninput="isTyping()" id="text" name="textarea" cols="45" rows="5"></textarea> 
 
<div id="send" class="not-typing">Not Typing</div>

問題：

をあなたのコードが動作しない理由があるので：

イベントのクラスを変更しましたonkeypress &すぐにイベントonkeyupに。

onkeypressは、あなたが任意のキー&を押すとあなたは同じキーを離すとonkeyupが意味を意味します。だから、あなたがonkeypressと入力したときに、onkeyup、onkeypress、onkeyup ...変化し続けるクラスが変わった。

代わりに私がやったことがあった。一つだけoninputイベントに使用

1. - 入力の変化を検知します。

2. 内部イベントハンドラは、setTimeout機能を使用するタイマを使用しました。 3秒間使用しないか、またはtextareaが空の場合にのみ起動します。