触发焦点,然后触发mousedown事件

问题描述 投票:0回答:1

所以我使用Froala作为我的rails应用程序,它有一个错误,它不会在加载时自动调整iframe的大小以容纳其中的所有文本。

但是,如果您单击身体所在的iframe内部并按箭头键(如移动光标),则会自动展开。

我怎么能自动模拟这个事件,以便我可以暂时解决我的问题?这就是froala编辑器的样子:

<iframe src="about:blank" frameborder="0" class="fr-iframe" style="height: 265px;">
   <html>
      <head>
         <style data-fr-style="true">html{margin:0px;height:auto;}body{height:auto;padding:10px;background:transparent;color:#000000;position:relative;z-index: 2;-webkit-user-select:auto;margin:0px;overflow:hidden;min-height:70px;}body:after{content:"";display:block;clear:both;}body::-moz-selection{background:#b5d6fd;color:#000;}body::selection{background:#b5d6fd;color:#000;}body{font-family: Verdana, Georgia, serif; font-size: 13px; color: rgb(68, 68, 68);}</style>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      </head>
      <body class="fr-view" dir="auto" contenteditable="true" aria-disabled="false" spellcheck="true">
         <p>HELLO WORLD</p>
         <p>HELLO WORLD</p>
         <p>HELLO WORLD</p>
         <p>HELLO WORLD</p>
         <p>HELLO WORLD</p>
         <p>HELLO WORLD</p>
         <p>HELLO WORLD</p>
         <p>HELLO WORLD</p>
      </body>
   </html>
</iframe>

在上面的例子中,iframe高度默认为20px,直到我点击iframe本身,向左移动光标,然后它自动扩展到265px。

我试图做的一些事情是:

  setTimeout(function(){
    $('textarea').froalaEditor('events.keydown', true);
  }, 2000)

初始化Froala编辑器后。

我也尝试在p和'body'元素上触发关键的新闻事件,但我很确定我做得不对。

var e = $.Event('keypress');
e.which = 65; // Character 'A'
$('body').trigger(e);
$('p').trigger(e);
javascript
1个回答
0
投票

这样就可以了:

var iframe = document.getElementsByClassName("fr-iframe")[0]
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

// get the element in question
const input = innerDoc.getElementsByTagName("body")[0];

// dispatch keyboard events
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));
© www.soinside.com 2019 - 2024. All rights reserved.