简体   繁体   English

如何将焦点设置为TextAngular的div

[英]How to set focus to div of TextAngular

I'm using a TextAngular. 我正在使用TextAngular。

<div
    text-angular
    ta-toolbar="[['bold','italics', 'underline', 'ol', 'ul']]"
    ng-model="model"></div>

I want to set focus by some condition, but I don't understand, how to do this. 我希望通过一些条件设置焦点,但我不明白,如何做到这一点。

Don't know your exact needs, but this should be a start. 不知道你的确切需求,但这应该是一个开始。

Add a name to the element with the text-angular attribute and add a new attribute focus (or some other name you want) and pass it an expression: 使用text-angular属性为元素添加名称,并添加新的属性focus (或您想要的其他名称)并将其传递给表达式:

<div text-angular name="myEditor" focus="shouldFocus" ...

Add a directive called textAngular like this: 添加一个名为textAngular的指令,如下所示:

app.directive('textAngular', ['$parse', '$timeout', 'textAngularManager',
  function($parse, $timeout, textAngularManager) {

    return {
      link: function(scope, element, attributes) {

        // Parse the focus expression
        var shouldFocus = $parse(attributes.focus)(scope);

        if (!shouldFocus) return;

        $timeout(function() {

          // Retrieve the scope and trigger focus
          var editorScope = textAngularManager.retrieveEditor(attributes.name).scope;
          editorScope.displayElements.text.trigger('focus');
        }, 0, false);
      }
    };
  }
]);

Demo: http://plnkr.co/edit/ML3rLNutIz1XMo3oO2UC?p=preview 演示: http //plnkr.co/edit/ML3rLNutIz1XMo3oO2UC?p=preview

将键盘焦点设置为<div></div><div id="text_translate"><p>我有以下代码片段:</p><pre> &lt;div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;"&gt; &lt;a id="focusLink2"&gt;&lt;/a&gt; &lt;table id="ptObj_listbox1...</pre><p> 我有一个动态构建&lt;div&gt;元素的页面(例如上面)。 这个&lt;div&gt;在主屏幕顶部显示数据。 当页面生成 div 时,我想设置焦点。 我不能将 onLoad function 放在 body 标签上,因为我不知道何时会生成 div。</p><p> &lt;div&gt;标签不能直接设置焦点。 所以我在下面的 function 中放置了一个带有 id 的空&lt;a&gt;标签:</p><pre> function setTableFocus(count){ var flinkText = 'focusLink'+count; document.getElementById(flinkText).focus(); }</pre><p> 我没有收到任何错误,并且我知道在显示页面时(通过警报)正在调用 function。 但是,当我使用箭头键或输入按钮时,整个页面都会移动(甚至不是显示数据的 div)。</p><p> 当我单击其中一个表格元素时(使用鼠标)。 之后,keydown 事件开始工作。 我想做的是将数据呈现给用户并自动由键盘驱动。</p><p> 有人对我如何做到这一点有任何建议吗?</p></div> - Set keyboard focus to a <div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在父div内为div设置焦点? - How to set focus for div inside parent div? 如何在 Javascript 的 iframe 中将焦点设置为 div 元素? - How to set the focus to a div element in an iframe in Javascript? 如何将“焦点”设置回到可疑的div - How to set “focus” back to contenteditable div 将键盘焦点设置为<div></div><div id="text_translate"><p>我有以下代码片段:</p><pre> &lt;div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;"&gt; &lt;a id="focusLink2"&gt;&lt;/a&gt; &lt;table id="ptObj_listbox1...</pre><p> 我有一个动态构建&lt;div&gt;元素的页面(例如上面)。 这个&lt;div&gt;在主屏幕顶部显示数据。 当页面生成 div 时,我想设置焦点。 我不能将 onLoad function 放在 body 标签上,因为我不知道何时会生成 div。</p><p> &lt;div&gt;标签不能直接设置焦点。 所以我在下面的 function 中放置了一个带有 id 的空&lt;a&gt;标签:</p><pre> function setTableFocus(count){ var flinkText = 'focusLink'+count; document.getElementById(flinkText).focus(); }</pre><p> 我没有收到任何错误,并且我知道在显示页面时(通过警报)正在调用 function。 但是,当我使用箭头键或输入按钮时,整个页面都会移动(甚至不是显示数据的 div)。</p><p> 当我单击其中一个表格元素时(使用鼠标)。 之后,keydown 事件开始工作。 我想做的是将数据呈现给用户并自动由键盘驱动。</p><p> 有人对我如何做到这一点有任何建议吗?</p></div> - Set keyboard focus to a <div> 如何在 textAngular 编辑器中忽略图像 - How to ignore images in the textAngular editor 如何将焦点放在包含灯箱图库中图像的div上? - How to set focus on a div containing the image in lightbox gallery? 当lightbox_me触发时如何将焦点设置在DIV上? - How to set focus on DIV when the lightbox_me trigger? 如何将焦点设置为具有溢出的div:滚动 - How can I set focus to a div with overflow:scroll 在 angular 2 中单击按钮时如何将焦点设置到 div? - How to set focus to the div when button click in angular 2? 将焦点设置为div中字符串的结尾 - Set focus to end of string in div
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM