【问题标题】:How to show popover if user only starts typing in input field?如果用户只开始在输入字段中输入,如何显示弹出框?
【发布时间】:2019-02-22 04:01:34
【问题描述】:

我有一个输入字段,我只想在用户输入字段时显示弹出框,并且我不想在输入字段为空时第一次显示弹出框。 我已经编写了以下代码,但它在我第一次单击它时显示了弹出框!有什么办法可以解决吗? 这是显示问题的 plnkr:

http://plnkr.co/edit/d6WzzJYgDHlBmx1Pfb9L?p=preview

<input type="text"
    value="Click me!" 
    ng-model="value"
    popover-is-open="!!value"  
    uib-popover="This must be shown when use has typed value"  
    popover-trigger="focus"
    class="form-control">

【问题讨论】:

  • 任何解决方案???
  • @khush 我在下面回答了我自己的问题......我实际上不记得了......

标签: html angularjs twitter-bootstrap-3 angular-ui-bootstrap uipopover


【解决方案1】:

请试试这个代码,我改变了点击改变。

<div ng-controller="PopoverDemoCtrl">
  <br />
  <br />
  <br />
    <input type="text"
    value="Click me!" 
    ng-model="value"
    popover-is-open="!!value"  
    uib-popover="This must be shown when use has typed value"  
    popover-trigger="change"
    class="form-control">

    <br />
    {{value}} -- {{!!value}}
</div>

告诉我,

谢谢!

【讨论】:

  • 哇!令人惊讶的是,效果很好,我在任何地方都没有看到那个触发器!你是怎样找到它的?但是当我点击输入时它不会关闭弹出窗口!
  • 你是对的,“类型”作为“无”工作,所以是不正确的。最好不要放置任何内容并检查使用“popover-is-open”或“popover-enable”禁用弹出框的方法。我还检查了 popover-trigger="change" 是否正常工作并且 popover-trigger="keyup" 或 mouseup 或输入或粘贴。真好奇。
【解决方案2】:

我找到了一种方法来获得我想要的结果,方法如下:

<input type="text"
    value="Click me!" 
    ng-model="value"
    popover-is-open="!!value && popUpOpen"  
    uib-popover="This must be shown when use has typed value"  
    popover-trigger="none"
    ng-blur="popUpOpen = false"
    ng-focus="popUpOpen = true"
    class="form-control">

【讨论】:

    【解决方案3】:

    我知道你找到了一个解决方案,它也使用 uib 并使用触发器“鼠标点击”

    <input vm.detectChange popover-append-to-body="true"  popover-placement="right" uib-popover-template="'popup.html'" popover-is-open="isOpen" popover-trigger="mouseclick" popover-title="Popup: ">
    

    【讨论】:

    • 我猜没有mouseclick 触发器。
    【解决方案4】:

    我尝试了许多其他解决方案,但这只对我有用。

    我通过添加一个隐藏可见性的新按钮并使用此按钮绑定弹出框来解决此问题。在输入点击输入时,我手动打开了这个弹出框。

    【讨论】:

      猜你喜欢
      • 2013-02-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-09-26
      相关资源
      最近更新 更多