预览标签在按下编辑按钮时不显示

Question

当我输入我的textarea一次搜索到超过4个字符时，它将启用预览选项卡。

如果我点击我的编辑器按钮示例按钮 - 粗体显示文本，如**strong text**，但即使有超过4个字符预览选项卡未启用。

目前它KEYUP

问题时，才会启用：我怎样才能知道如果我点击一个按钮，编辑它将 dected多少个字符，如果大于4将使标签。

CodePen Example Demo

$('#tab-preview').hide(); 

$("#textarea_message").on('keyup', function(e){ 
    if ($(this).val().length >= "4") { 
     $('#tab-preview').show(); 
    } 

    if ($(this).val().length < "4") { 
     $('#tab-preview').hide(); 
    } 
}); 

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12"> 
     <form id="form-ask"> 

     <div class="form-group"> 
      <button type="button" id="button-bold" class="btn btn-default" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></button> 
      <button type="button" id="button-italic" class="btn btn-default" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></button> 
      <button type="button" id="button-quote" class="btn btn-default" title="Quote"><i class="fa fa-quote-left" aria-hidden="true"></i></button> 
      <button type="button" id="button-code" class="btn btn-default" title="Code"><i class="fa fa-quote-left" aria-hidden="true"></i></button> 
      <button type="button" id="button-insert-image" data-toggle="modal" data-target="#insert-image" class="btn btn-default" title="Insert Image URL"><i class="fa fa-code" aria-hidden="true"></i> 
</button> 
      <button type="button" id="button-upload" class="btn btn-default" title="Add Attachment: This can be image or file "><i class="fa fa-file" aria-hidden="true"></i> 
Attach File</button> 
     </div> 

     <div class="panel ask panel-default"> 
      <div class="panel-heading"> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a data-target="#ask" id="tab-ask" data-toggle="tab"><i class="fa fa-code" aria-hidden="true"></i> Ask Question</a></li> 
       <li><a data-target="#preview" id="tab-preview" data-toggle="tab"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a></li> 
      </ul> 
      </div> 
      <div class="panel-body"> 
      <div class="tab-content"> 
       <div class="tab-pane fade in active" id="ask"> 
       <div class="form-group"> 
        <textarea id="textarea_message" class="form-control"></textarea> 
       </div> 
       </div> 
       <div class="tab-pane fade" id="preview"> 
       <div class="preview-message"></div> 
       </div> 
      </div> 
      </div> 
     </div> 
     <p class="text-muted">Preview Button will be enabled once your question has reached 
      4 character or more.</p> 


     </form> 
    </div> 
    </div> 
</div> 

Answer 1

一个解决办法是在您的按钮添加一个 '触发' 的keyup事件

$('#button-bold').on('click', function(e) { 
    markdown_syntax(this.id, "**", "**", 'strong text'); 
    $("#textarea_message").trigger('keyup'); 
});