1
庫/框架中使用jQuery的= + 4引導我 想拍像櫃檯嘰嘰喳喳,但是有兩個輸入字段,如果2輸入是有效的,然後發佈。 這是我的代碼到目前爲止。Twitter的類似反
$('.new_post_title').keyup(function() {
var max_character = 15;
var length_ = $(this).val().length;
if (length_ > max_character) {
$(".new_post_title_count").css('color', 'red');
var character = length_;
$('.new_post_title_count').text(character);
$('.new_post_button').prop('disabled', true);
} else {
$(".new_post_title_count").css('color', 'black');
var character = max_character - length_;
$('.new_post_title_count').text(character);
$('.new_post_button').prop('disabled', false);
}
});
$('.new_post_content').keyup(function() {
var max_character = 10;
var length_ = $(this).val().length;
if (length_ > max_character) {
$(".new_post_content_count").css('color', 'red');
var character = length_;
$('.new_post_content_count').text(character);
$('.new_post_button').prop('disabled', true);
} else {
$(".new_post_content_count").css('color', 'black');
var character = max_character - length_;
$('.new_post_content_count').text(character);
$('.new_post_button').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="new_post_modal" tabindex="-1" role="dialog" aria-labelledby="new_post_modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form>
<div class="form-group">
<label class="form-control-label">Title (Optional)</label>
<input type="text" class="form-control new_post_title" placeholder="Make a title...">
<span class="new_post_title_count"></span>
</div>
<div class="form-group">
<label class="form-control-label">Content</label>
<input type="text" class="form-control new_post_content" placeholder="Publish something...">
<span class="new_post_content_count"></span>
</div>
<div class="form-group">
<label class="form-control-label">Image</label>
<input type="file" class="form-control-file">
</div>
<button class="btn btn-primary new_post_button">Post</button>
</form>
</div>
</div>
</div>
</div>
的問題是,如果我欺騙此代碼我可以使後而不驗證它,對於第一輸入我把20個字符和用於第二我把10個字符和按鈕啓用。
完美!。感謝vi5ion –