加载弹出式文本输入时运行js

时间:2018-07-25 02:27:18

标签: javascript popover

想拥有cleave.js来即时格式化文本输入。

我有2个文本输入

  1. HTML文本输入和
  2. 每当单击搜索图标时,也会弹出文本输入。

问题出在没有切割文本格式的弹出文本输入上     工作。

我认为它可能与某种不存在的元素有关?我已经试着听听,但到目前为止还没有运气。 .on('shown.bs.popover)

我的代码如下 https://jsfiddle.net/fairul82/y3kf92oq/ 使用的库:cleave,js,bootstrap popover,jquery

 HTML
<div class="container">
 <h3>Bootstrap 3 Popover HTML Example</h3>
 <input type="text" class="input-element"><br>
 <ul class="list-unstyled">
 <li><a data-placement="bottom" data-toggle="popover" data- 
container="body" data-placement="left" type="button" data-html="true" 
href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a></li>
<div id="popover-content" class="hide">
  <form class="form-inline" role="form">
    <div class="form-group">
      <h1>
        My Content
      </h1>
      <input type="text" class="input-element"><br>
    </div>
  </form>
</div>

//JS
$("[data-toggle=popover]").popover({
 html: true,
 content: function() {
 return $('#popover-content').html();
 }
 });

 $("[data-toggle=popover]").on('shown.bs.popover', function() {
 // alert('called back');
 const cleave = new Cleave('.input-element', {
 numeral: true,
   numeralThousandsGroupStyle: 'thousand'
 });
 });

 const cleave = new Cleave('.input-element', {
 numeral: true,
  numeralThousandsGroupStyle: 'thousand'
 });

1 个答案:

答案 0 :(得分:0)

这是解决方法https://jsfiddle.net/ztkv8w60/19/

根据授权文件https://github.com/nosir/cleave.js,它具有注释dd MMMM, yyyy

这是一个棘手的问题,因为当图标被点击时, String dateValue = "20 September, 2013"; // Type of different Month views SimpleDateFormat sdf = new SimpleDateFormat("dd MMMM, yyyy"); //20 September, 2013 SimpleDateFormat sdf1 = new SimpleDateFormat("dd MM, yyyy"); //20 09, 2013 SimpleDateFormat sdf2 = new SimpleDateFormat("dd MMM, yyyy"); //20 Sep, 2013 Date date = sdf.parse(dateValue); // returns date object System.out.println(date); // outputs: Fri Sep 20 00:00:00 IST 2013 会创建与您的特定div相同的元素。因此,有两个相同的元素,您必须指出弹出框中的哪个元素。