单击文本区域上的切换按钮 jquery

Question

我想在单击 textarea 时切换提交 button 可见性。

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>

当用户单击 textarea 我想查看按钮时。我的 textarea 使用 tineymce 插件进行编辑。

Answer 1

使用这个：

$(document).ready(function(){
    $("textarea").focus(function(){
        $("button").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="flow_info">
    <textarea id="flow_button_view" name="dessc" class="social_text_area" placeholder="Flow your thinking"></textarea>
  <br>
    <button name="Submit" type="submit" class="social_button_area" title=" Share Your Flow " style="display: none;">
    <i class="fa fa-share-alt-square"></i> Post
    </button>
</div>

Answer 2

要在初始化为 tinymce 的 <textarea> 上使用 blur 和 focus 事件，您需要在初始化时传递事件：

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();
    });
  }
});

工作JSFiddle。

Answer 3

<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" id="button" title=" Share Your Flow ">
<i class="fa fa-share-alt-square"></i> Post </button>

$('#flow_info').hide();
$('#flow_button_view').on('keyup', function() {
    if (this.value.length) {
        $('#flow_info').show();
    }else{
        $('#flow_info').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.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" id="button" title=" Share Your Flow ">
    <i class="fa fa-share-alt-square"></i> Post </button>
 </div>

通过使用jquery你可以做到

Answer 4

试试这个

$("#flow_button_view").focus(function() {
   $('#flow_info').show();
}

如果即使用户在文本框外部单击也想显示按钮，那么您应该使用另一个功能来检查文本框中是否写了某些内容以及焦点功能 'onkeypress' 事件可以帮助您跟踪是否用户是否写过东西。

Answer 5

我不确定，但我想你想问的是如何在你的 tinyMCE 编辑器实例的 click/change 上 enable/show 一个按钮。如果这是正确的，那么您可以使用 TinyMCE 的处理程序来检测状态更改和其他事件。您尚未指定您使用的是哪个版本的 TinyMCE，但是对于 4.x 您可以使用如下内容：

tinymce.init({
    setup: function (editor) {
        editor.on('focus', function (e) {  
          alert('Editor is in focus');
          $(".editor_submit_button").show();  // add an id to the button you want to toggle and use it here.          
         });
});

参考：https://www.tinymce.com/docs/advanced/events/

编辑：已更新 link

单击文本区域上的切换按钮 jquery

toggle button on text area click in jquery

html

javascript

jquery

tinymce