layer自定义prompt输入框

本文介绍了如何扩展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: ["确定", "取消"],
        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)
        }
      })
    }

修改了input的type,以及添加一个回车事件监听,输入完回车即可完成。
显示效果

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值