检查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中的空字符串

回答

相关问题