1.简介
Layui是一款经典的web前端框架，同时支持jquery和原生js，其操作简单，功能强大，体积小巧，被广泛应用于各类web项目中。在实际应用中，经常需要对输入框进行一些操作，例如设置禁止输入、实时校验、联动选择等。本文将介绍layui如何设置禁止输入。
2.设置input禁止输入
在layui中，可以通过给input元素设置disabled属性，来实现禁止用户输入。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>禁止输入</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required"
autocomplete="off" placeholder="请输入姓名" disabled class="layui-input">
</div>
</div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
// layui代码
layui.use('form', function(){
var form = layui.form;
});
</script>
</body>
</html>
上述代码中，设置了一个输入框，给其设置了disabled属性，即可禁止此输入框输入。同时，layui中提供了丰富的表单控件，例如日期选择器、下拉框等，使表单操作更加方便快捷。
3.设置textarea禁止输入
与input类似，也可以通过给textarea元素设置disabled属性，来实现禁止用户输入。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>禁止输入</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-form">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">介绍</label>
<div class="layui-input-block">
<textarea name="desc" lay-verify="required"
placeholder="请输入介绍" disabled class="layui-textarea"></textarea>
</div>
</div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
// layui代码
layui.use('form', function(){
var form = layui.form;
});
</script>
</body>
</html>
上述代码中，设置了一个textarea输入框，给其设置了disabled属性，即可禁止此输入框输入。需要注意的是，Textarea需要加上class属性并设置为layui-textarea，否则样式会出现不一致的情况。
4.禁止部分输入框输入
在一些场景中，可能需要对部分输入框进行禁止输入，例如只允许数字输入的情况下，需要禁止用户输入其它字符。此时，可以通过监听输入事件，并动态过滤掉非数字字符，来实现部分输入框禁止输入。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>禁止输入</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-block">
<input type="text" name="age" autocomplete="off"
placeholder="请输入年龄（数字）" class="layui-input" id="ageInput">
</div>
</div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
// layui代码
layui.use('form', function(){
var form = layui.form;
// 监听Age Input事件
document.getElementById('ageInput').addEventListener('input', function (event) {
var ageValue = event.target.value;
var ageNum = Number(ageValue);
if (isNaN(ageNum) || ageValue == null || ageValue ==''){
// Age输入非数字
event.target.value = '';
layui.layer.msg('Age请输入数字！',{
icon: 2,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
});
} else {
event.target.value = ageValue;
}
});
});
</script>
</body>
</html>
上述代码中，定义了一个输入框，给其设置了id属性，然后通过js监听输入框事件，并获取输入内容。如果数字输入非数字字符，则会提示用户只能输入数字。需要注意的是，此时需要将输入框的disabled属性去掉，否则无法使用js事件。
5.总结
本文介绍了在layui中如何设置输入框禁止输入的方法，包括对input和textarea元素的禁用，以及通过js动态禁止输入的方法。在实际使用中，还可以通过表单验证、联动选择等功能，进一步提升表单操作体验。