Question

点击button时，我希望切换提交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>

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

Answer 1

使用此：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

<强> 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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jquery你可以做到

Answer 4

试试这个

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

如果您想要显示按钮，即使用户在文本框外单击，那么您应该再使用一个函数来检查是否有文本框写入了某些内容以及焦点函数'onkeypress'事件可以帮助您跟踪用户是否已编写了某些内容或不。

Answer 5

我不确定，但我认为您要问的是如何在点击/更改您的tinyMCE编辑器实例时启用/显示按钮。如果这是正确的，那么您可以使用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/

编辑：更新链接

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

5 个答案: