JavaScriptのテキストエリアで空の文字列を確認する

Question

ウェブページにテキストエリアがあり、文字列が空のときにその周りに枠線を付けたいと思っています。しかし、それは私がテキストに何かを入れて、それを再び削除する場合にのみ機能します。テキストエリアに書き込む前に、どのように境界線を表示させることができますか？ここにコードがあります：

$("#message-box").on("keyup", function(){ 
    var charCount = $("#message-box").val().length; 
    console.log("charCount"); 
    $("#char-count").html(charCount); 

    if (charCount === "") { 
     $("#message-box").css("border", "10px solid red"); 
    }else{ 
     $("#message-box").css("border", ""); 
      //event listener 
     $("#submitbutton").on('click', function() { 
     var comment = $("#message-box").val(); 
     $("#visible-comment").html(comment); 
     $("#message-box").hide(); 

     console.log(comment); 
     return false; 
     }); 
    }; 
}; 

Answer 1

以前に値が挿入されていないとテストは機能しません。

あなたは値が最初に存在するかどうかもチェックし

if ($("#message-box").val() == undefined || $("#message-box").val().length == 0) 

代わりの

if (charCount === "") { 

を行うことができます。

Answer 2

function checkCharCount(){ 
 
    charCount = $("#message-box").val().length; 
 
    $("#char-count").html(charCount); 
 
    if (charCount === "") { 
 
    $("#message-box").css("border", "10px solid red"); 
 
    }else{ 
 
    $("#message-box").css("border", ""); 
 
    } 
 
} 
 

 
$("#message-box").on("keyup", function(){ 
 
    checkCharCount(); 
 
}); 
 

 
$("#submitbutton").on('click', function() { 
 
    var comment = $("#message-box").val(); 
 
    $("#visible-comment").html(comment); 
 
    $("#message-box").hide(); 
 
    console.log(comment); 
 
    return false; 
 
}); 
 

 
checkCharCount();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="message-box"></textarea> 
 
<span id="char-count"></span>

あなたはそれはあなたが/削除文字を入力した後にのみ動作します理由です「からkeyup」イベントリスナ内であなたの境界を定義しています。 charcheckを関数にすると、繰り返しを避けることができます。

さらに、いくつかのタイプミスがありました。

Answer 3

構文エラーがあるかどうかを確認してください。

$("#message-box").on(このセクションはまたもcharCount = $("#message-box").val().length;は、テキスト領域は、それが0を与える空の場合でも数を返します。イベントに$("#submitbutton").on('click', function()

を区切る);

で閉鎖されていません。だから、だからあなたの最終的なコードが

$("#message-box").on("keyup", function(){ 
    var charCount = $("#message-box").val().length; 
    console.log("charCount"); 
    $("#char-count").html(charCount); 

    if (charCount==0) { 
     $("#message-box").css("border", "10px solid red"); 
    }else{ 
     $("#message-box").css("border", ""); 
      //event listener 
    }; 
}); 

$("#submitbutton").on('click', function() { 
var comment = $("#message-box").val(); 
$("#visible-comment").html(comment); 
$("#message-box").hide(); 

console.log(comment); 
return false; 
}); 

https://jsfiddle.net/tintucraju/08dp6ra5/2/

Answer 4

これを処理するコードは必要ありとなっていない

if (charCount==0)

としてそれを確認する必要がある - 一緒に、CSS :invalid擬似クラスを使用しますrequired属性：

textarea:invalid { border: 10px solid red; }

<textarea required></textarea>

また210

、一緒にplaceholder属性で、:placeholder-shown擬似クラスを使用します。

const messageBox  = document.getElementById('message-box'); 
const charCount  = document.getElementById('char-count'); 
const visibleComment = document.getElementById('visible-comment'); 

messageBox.addEventListener('input',() => { 
    charCount.textContent  = messageBox.value.length; 
    visibleComment.textContent = messageBox.value; 
}); 

注使用していること：charcountにを取得するには

textarea:placeholder-shown { border: 10px solid red; }

<textarea placeholder="Type here"></textarea>

inputイベントはkeyupよりも優先されます。これは、テキスト領域にテキストをドラッグアンドドロップするなどのケースを処理しない可能性があるためです。 innerHTML（またはJqueryの.html()、同じもの）を使用する代わりにvisible-contentにコメントを入れるには、textContent（または.text()）を使用してください。そうしないと、入力内の<などのHTML文字がHTMLとして解釈され、出力が破損する可能性があります。