layer自定义prompt输入框

最新推荐文章于 2025-09-03 00:29:34 发布

原创最新推荐文章于 2025-09-03 00:29:34 发布 · 6.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #layui

本文介绍了如何扩展layer的prompt功能，以支持更多的输入类型，如数字，并通过添加回车事件监听来提升用户体验。

layer自定义prompt输入框

layer prompt非常方便，但是只支持 textarea ，password和text，有时候想获取一个数字还有点不方便，所以修改一下可以非常方便使用

/**
*	title:标题
*	initVal:初始值
*	fun:回调函数，第一个参数是layerIndex，第二个是输入框的值
*	cont：自定义input
**/
 function openNumberPrompt(title, initVal, fun, cont) {
      var promptInput;
      layer.open({
        type: 1,
        title: title,
        btn: ["&#x786E;&#x5B9A;", "&#x53D6;&#x6D88;"],
        content: cont || '<input type="number" class="layui-layer-input" value="' + initVal + '" >',
        skin: "layui-layer-prompt",
        success: function (e) {
          var layerId = e[0].id;
          var idx = parseInt(layerId.charAt(layerId.length - 1))

          promptInput = e.find(".layui-layer-input");
          $(promptInput).val('').focus().val(initVal);
          $("input.layui-layer-input").on('keydown', function (e) {
            if (e.which == 13) {
              var inptVal = promptInput.val();
              if (fun) {
                fun(idx, inptVal)
              }
            }
          });
        },
        resize: !1,
        yes: function (i) {
          var inptVal = promptInput.val();
          return fun && fun(i, inptVal)
        }
      })
    }