Saiful Islam Sagor Saiful Islam Sagor - 1 year ago 52
HTML Question

toggle button on text area click in jquery

I want to toggle a Submit

button
visibility when I click on
textarea
.

HTML:

<textarea id="flow_button_view" name="dessc" class="social_text_area" placeholder="Flow your thinking"></textarea>
<div id="flow_info">
<button name="Submit" type="submit" class="social_button_area" title=" Share Your Flow ">
<i class="fa fa-share-alt-square"></i> Post
</button>
</div>


when user clicks the
textarea
I want to view the button. My
textarea
uses tineymce plugin for edit.

Answer Source

To use blur and focus events on your <textarea> initialised as tinymce, you need to pass the events upon initialization:

HTML:

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script> 
.....
<textarea id="flow_button_view" name="dessc" class="social_text_area" placeholder="Flow your thinking"></textarea>

<div id="flow_info">
  <button name="Submit" type="submit" class="social_button_area" title=" Share Your Flow ">
    <i class="fa fa-share-alt-square"></i> Post
  </button>
</div>

CSS:

#flow_info {
  display: none;
}

JS:

var $info = $("#flow_info");

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('focus', function (e) {
      $info.show();
    });
    editor.on('blur', function (e) {
      $info.hide();
    });
  }
});

working JSFiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download