Twitterのようなカウンター

Question

ライブラリ/フレームワーク使用= Jquery + Bootstrap 4 2つの入力フィールドが有効な場合は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の文字とボタンを配置秒間、それを検証せずにポストを作成することができ、あります有効です。

Answer 1

ボタンの有効/無効を個別にチェックする必要があります。このチェックボックスでは、他のフィールドが有効かどうかを考慮します。どちらも、表示するボタンに対して有効である必要がありますが、あなたのコードでは、あなたはあなたが現在で入力しているフィールドを確認してください。

var titleLength = 0; 
 
var titleMaxLength = 15; 
 
var contentLength = 0; 
 
var contentMaxLength = 10; 
 

 
$('.new_post_title').keyup(function() { 
 
    titleLength = $(this).val().length; 
 
    if (titleLength > titleMaxLength) { 
 
    $(".new_post_title_count").css('color','red'); 
 
    var character = titleLength; 
 
    $('.new_post_title_count').text(character); 
 
    } 
 
    else { 
 
    $(".new_post_title_count").css('color','black'); 
 
    var character = titleMaxLength - titleLength; 
 
    $('.new_post_title_count').text(character); 
 
    } 
 
    if (titleLength > titleMaxLength || contentLength > contentMaxLength) { 
 
    $('.new_post_button').prop('disabled', true); 
 
    } 
 
    else { 
 
    $('.new_post_button').prop('disabled', false); 
 
    } 
 
}); 
 

 
$('.new_post_content').keyup(function() { 
 
    contentLength = $(this).val().length; 
 
    if (contentLength > contentMaxLength) { 
 
    $(".new_post_content_count").css('color','red'); 
 
    var character = contentLength; 
 
    $('.new_post_content_count').text(character); 
 
    } 
 
    else { 
 
    $(".new_post_content_count").css('color','black'); 
 
    var character = contentMaxLength - contentLength; 
 
    $('.new_post_content_count').text(character); 
 
    } 
 
    if (titleLength > titleMaxLength || contentLength > contentMaxLength) { 
 
    $('.new_post_button').prop('disabled', true); 
 
    } 
 
    else { 
 
    $('.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>