layui 文本框
时间: 2023-06-29 15:07:06 浏览: 97
Layui 是一款非常流行的前端 UI 框架,提供了丰富的组件和样式,其中包括文本框组件。在 Layui 中,可以通过以下代码创建一个文本框:
```
<div class="layui-form-item">
<label class="layui-form-label">文本框</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
```
其中,`layui-form-item` 和 `layui-form-label` 是 Layui 提供的样式类,用于控制表单元素的布局和样式。`layui-input-block` 则是用于控制表单元素的宽度,可以根据实际需要进行调整。`input` 标签中的 `type` 属性指定了输入框的类型为文本框,`name` 属性指定了表单元素的名称,`autocomplete` 属性用于控制浏览器自动填充功能,`placeholder` 属性则是用于设置输入框的提示文本。最后,`layui-input` 样式类用于为输入框添加样式,使其符合 Layui 的风格。
相关问题
layui文本框
在LayUI中,可以使用form模块的input组件来实现文本框。例如:
```
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
```
上述代码创建了一个带有label标签的文本框。在文本框中,使用input组件来创建文本框,包含name、required、lay-verify、placeholder、autocomplete和class等属性。其中,lay-verify="required"表示该文本框为必填项。
在LayUI中,还可以使用textarea组件来创建多行文本框。例如:
```
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">评论内容</label>
<div class="layui-input-block">
<textarea name="content" placeholder="请输入评论内容" class="layui-textarea"></textarea>
</div>
</div>
```
上述代码创建了一个带有label标签的多行文本框。在文本框中,使用textarea组件来创建多行文本框,包含name、placeholder和class等属性。使用layui-form-text类来实现多行文本框的样式。
layui文本框填充值
可以使用layui的form模块的赋值方法,具体代码如下:
HTML代码:
```
<form 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" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
```
JS代码:
```
layui.use(['form'], function(){
var form = layui.form;
//给用户名和密码文本框赋值
form.val('formDemo', {
'username': 'admin',
'password': '123456'
});
//监听提交
form.on('submit(formDemo)', function(data){
console.log(data.field);
return false;
});
});
```
其中,form.val()方法用于给表单元素赋值,第一个参数是form的lay-filter属性值,第二个参数是一个对象,属性名对应表单元素的name属性值,属性值对应表单元素的值。在这个例子中,给用户名和密码文本框赋了默认值,可以根据需要进行修改。