layui怎么设置输入框最大输入字符

1、第一步：写一个简单的文本页面，里面有输入框，代码如下：

<form class="layui-form">

 

   <div class="layui-form-item">

 

       <label class="layui-form-label">单行输入框</label>

 

       <div class="layui-input-block">

 

           <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">

 

       </div>

 

   </div>

 

</form>

2、第二步：限制最大输入字符方法1，写一个简单onKeyUp监听方法，代码如下：

function inputLength(e) {

 

   console.log('----------'+ e.value)

 

   if(e.value.length > 10){

 

       alert('too long');

 

   }

 

   e.value = e.value.substr(0, 9);

 

}

3、第三步：在input上面添加事件，代码如下：

<input type="text" name="title" lay-verify="title" autocomplete="off"

 

      placeholder="请输入标题" class="layui-input" onkeyup="inputLength(this)">

4、第四步：打开页面，运行查看效果，可以发现input的长度被限制在10以内，效果如图:

5、第五步：还可以在input上直接写正则表达式，比如限制只能正整数输入，代码如下：

<input type="text" name="title" lay-verify="title" autocomplete="off"

 

      placeholder="请输入标题" class="layui-input"

 

      onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');"

 

/>

6、第六步：可以刷新页面发现是没有问题的，如图。

7、第七步：这里就说了2种办法，希望可以帮助大家