檢查javascript textarea中的空字符串

我在網頁上有一個textarea，並且當字符串爲空時，我想在它周圍有一個邊框。但它只有在我將某些東西放入文本然後再次刪除時纔有用。如何在我寫入textarea之前使邊框可見？這裏是代碼：檢查javascript textarea中的空字符串

$("#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; 
     }); 
    }; 
};

來源

2016-12-02 BobbyP

試試這個 - https://jsfiddle.net/Lgfcsxo9/ – Developer

查看我收錄的片段，有很多小問題:) – xShirase

相關：http://stackoverflow.com/questions/3617020/matching-an- empty-input-box-using-css – 2016-12-02 09:13:20

我想你的測試不工作，如果沒有值以前插入。

你可以做

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

，而不是

if (charCount === "") {

也檢查值存在在第一。

來源

2016-12-02 08:41:27

他使用charcount在他的html中顯示charcount，所以它可能是最好的方式 – xShirase

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變成函數可以避免重複。

此外還有一些錯別字。

來源

2016-12-02 08:41:30 xShirase

請檢查您是否有語法錯誤。

$("#message-box").on(這部分不以);

關閉還有單獨的事件$("#submitbutton").on('click', function()

也charCount = $("#message-box").val().length;會返回一個數字，即使文本區把它給0是空的。所以你需要檢查它作爲

if (charCount==0)

因此，最終的代碼變得

$("#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/

來源

2016-12-02 08:51:55

無需代碼來處理這一點 - 使用CSS :invalid僞類，一起與required屬性：

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

<textarea required></textarea>

或者，使用:placeholder-shown僞類，與placeholder屬性在一起：

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

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

要獲得charcount：

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; 
});

注意，使用input事件優於keyup，因爲後者可能不會處理諸如將文本拖放到textarea中的情況。要將註釋放入visible-content，而不是使用innerHTML（或Jquery的.html()，這是同一件事），請使用textContent（或.text()）;否則，輸入中的HTML字符（如<）將被解釋爲HTML並可能破壞輸出。

來源

2016-12-02 08:58:17

非常聰明的方式來處理它！但是，OP需要無論如何都是我想的。 – xShirase

檢查javascript textarea中的空字符串

回答

相關問題