我正在创建一个像Facebook这样的评论系统,当评论字段为空时,我试图阻止它追加。我的评论系统使用Jquery Elastic,当有人打字或我按Enter和Shift键时,它可以扩展文本区域。
问题
我不希望表单在文本区域为空时附加,但尽管我进行了验证,它还是附加了,并且无法判断文本区域何时为空
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function() {
$('#comment').keyup(function(e) {
if(e.keyCode == 13 && !e.shiftKey){
var comment = $('textarea#comment').val();
var sid = $('#sid').val();
if(comment == "")
{
alert("Please write something in comment.");
}
else
{
$("#commentbox").append("<div class='commentarea'>"+comment+"</div>");
$.post("index.php", {sid:sid,comment:comment},function(data)
{
})
$('#comment').val("");
}
}
});
});
</script>
<style>
.status
{
width:350px;
max-width:100%;
font-size: 13px;
line-height: 18px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
.commentarea
{
width:350px;
max-width:100%;
font-size: 13px;
line-height: 18px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
border: thin;
border-color: white;
border-style: solid;
background-color: hsl(0, 0%, 96%);
padding: 5px;
}
#comment
{
width: 357px;
max-width:100%;
height: 23px;
font-size: 15px;
}
</style>
<script src="js/jquery_elastic_1_6_11/jquery.elastic.source.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
//jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('textarea').elastic();
jQuery('textarea').trigger('update');
});
// ]]>
</script>
<link href="js/jquery_elastic_1_6_11/dependencies/screen.css" type="text/css" rel="stylesheet" />
<div class="status"> <?php echo $status; ?></div>
<div id="commentbox">
<?php echo $commentshow; ?>
</div>
<input type="hidden" name="sid" id="sid" value="<?php echo $sid; ?>">
<textarea name="comment" id="comment" placeholder="Write a comment...."></textarea>
如何确定文本区域何时为空并阻止其追加
注意:我也尝试过var comment= $('textarea#comment').val();
,但仍然。。
出现此问题的原因是,当用户按下ENTER键时,文本框的值包含换行空白。因此,文本框的值不是一个空字符串。您可以对注释值调用trim()来消除任何前导或尾随空格。
var comment = $('textarea#comment').val().trim();
这是小提琴。