jquery.inputmask.bundle.min.js没有通过Webjar正确加载?

时间:2018-03-04 15:27:37

标签: javascript jquery spring spring-boot webjars

我对编码有点新意。我的问题与标题相同。 我正在我的pom.xml中研究javaEE web项目。我有这个。

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.30</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery.inputmask</artifactId>
    <version>3.3.1</version>
</dependency>

在我的layout.html我加载了所有我的js路径:

<!-- jQuery -->
<script src="/webjars/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="/webjars/fastclick/fastclick.js"></script>
<!-- NProgress -->
<script src="/webjars/nprogress/nprogress.js"></script>
<!-- jquery.inputmask -->
<script src="/webjars/jquery.inputmask/min/jquery.inputmask.bundle.min.js">
</script>

<!-- Custom Theme Scripts -->
<script src="/js/custom.min.js"></script>

除了jquery.inputmask之外,一切正常,它对我的​​输入文本没有影响(没有屏蔽没有鼠标悬停事件)。为什么呢?

感谢您尝试帮助我,当您询问Click me for image

时,控制台上有一张图片

这是我使用它时的代码,但是输入文本没有像常规输入文本那样改变,没有屏蔽没有鼠标悬停事件,也使用百日咳作为模板引擎来查看页面。

          <!-- form input mask -->
          <div class="col-md-6 col-sm-12 col-xs-12">
            <div class="x_panel">
              <div class="x_title">
                <h2>Input Mask</h2>
                <ul class="nav navbar-right panel_toolbox">
                  <li><a class="collapse-link"><i class="fa fa-chevron-up">
                   </i></a>
                  </li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-
                    toggle="dropdown" role="button" aria-expanded="false"><i 
                 class="fa fa-wrench"></i></a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Settings 1</a>
                      </li>
                      <li><a href="#">Settings 2</a>
                      </li>
                    </ul>
                  </li>
                  <li><a class="close-link"><i class="fa fa-close"></i></a>
                  </li>
                </ul>
                <div class="clearfix"></div>
              </div>
              <div class="x_content">
                <br />
                <form class="form-horizontal form-label-left">

                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-
           3">Date Mask</label>
                    <div class="col-md-9 col-sm-9 col-xs-9">
                      <input type="text" class="form-control" data-
       inputmask="'mask': '99/99/9999'">
                      <span class="fa fa-user form-control-feedback right" 
            aria-hidden="true"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-
                   3">Phone mask</label>
                    <div class="col-md-9 col-sm-9 col-xs-9">
                      <input type="text" class="form-control" data-
             inputmask="'mask' : '(999) 999-9999'">
                      <span class="fa fa-user form-control-feedback right" 
                 aria-hidden="true"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-
           3">Custom Mask</label>
                    <div class="col-md-9 col-sm-9 col-xs-9">
                      <input type="text" class="form-control" data-
           inputmask="'mask': '99-999999'">
                      <span class="fa fa-user form-control-feedback right" 
           aria-hidden="true"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-
             3">Serial Number</label>
                    <div class="col-md-9 col-sm-9 col-xs-9">
                      <input type="text" class="form-control" data-
        inputmask="'mask' : '****-****-****-****-****-***'">
                      <span class="fa fa-user form-control-feedback right" 
           aria-hidden="true"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-
              3">TaxID Mask</label>
                    <div class="col-md-9 col-sm-9 col-xs-9">
                      <input type="text" class="form-control" data-
        inputmask="'mask' : '99-99999999'">
                      <span class="fa fa-user form-control-feedback right" 
          aria-hidden="true"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-
           3">Credit Card Mask</label>
                    <div class="col-md-9 col-sm-9 col-xs-9">
                      <input type="text" class="form-control" data-
       inputmask="'mask' : '9999-9999-9999-9999'">
                      <span class="fa fa-user form-control-feedback right" 
           aria-hidden="true"></span>
                    </div>
                  </div>
                  <div class="ln_solid"></div>

                  <div class="form-group">
                    <div class="col-md-9 col-md-offset-3">
                      <button type="submit" class="btn btn-
                  primary">Cancel</button>
                      <button type="submit" class="btn btn-
              success">Submit</button>
                    </div>
                  </div>

                </form>
              </div>
            </div>
          </div>
          <!-- /form input mask -->

最后谢谢大家, 非常感谢,我得到了插件所有者的帮助 对于想知道NiK648如下所述的人,只需在pom.xml文件中添加输入掩码

     <dependency>
      <groupId>org.webjars.npm</groupId>
      <artifactId>inputmask</artifactId>
       <version>3.3.11</version>
       </dependency>

和js部分中的这一行

 <script src="/webjars/inputmask/inputmask/bindings/inputmask.binding.js"></script>

0 个答案:

没有答案