layui form 中input输入框长度的统一设置

最新推荐文章于 2024-07-24 23:16:01 发布
最新推荐文章于 2024-07-24 23:16:01 发布
阅读量2k 收藏
点赞数
文章标签： layui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ok060/article/details/134226350
版权

Layui.form中使用class="layui-input-inline"就可轻松将元素都放到一行，但如果元素过多，就会自动换行。那就需要手动设置input框的长度。

像这种情况：

 

其实只需要添加css样式就可修改了 

 

.layui-form-item .layui-input-inline {
    width: 195px;
}

tips:需要注意的是，样式里的选择器不能直接用.layui-input-inline。因为layui.form中默认的样式就是用.layui-form-item .layui-input-inline去做选择器，我们需要做的就是覆盖掉这个样式。 

ok060
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layui输入框只允许输入中文且判断长度
liulu_suyan的博客
08-22 1万+
今天写项目遇到一个问题，在输入老师昵称的时候需要控制input输入框不能为空，且字符的长度有限制，英文字符不能超过20，中文不能超过10。输入课程简介的时候，textarea只能输入中文和中文标点，且长度不超过100。使用框架为：Thymeleaf + layui + shiro。 搜了很多资料没找到全的，现将具体实现展示如下： [不为空的要求：] 这个...
layui实现车牌号输入框
06-06
通过以上步骤，我们就实现了layui中的车牌号输入框，并且支持了新能源车牌的录入。这种实现方式不仅提高了用户体验，也确保了数据的准确性。在实际项目中，可以进一步优化，例如添加错误提示、自动补全等功能，提升...
layui-input-block和layui-input-inline的区别
sunsineq的专栏
07-09 6419
layui-input-block：是一个表单元素占一行，竖着，以例表的形式排列。 layui-input-inline：多个表单控件占一行，横着，一行可以放置多个表单元素。
layui的 input正则校验必填和必须为正整数
zheshihuahua的博客
06-24 225
【代码】layui的 input正则校验必填和必须为正整数。
Layui限制input输入框内容长度、以及输入框失去焦点事件、lay-search搜索事件
热门推荐
Sparks550的博客
11-11 1万+
需求 限定input输入框内容长度为，不大于30 input输入框失去焦点，check输入内容长度 代码 页面端：注意lay-verify=“required|account”、lay-size=“30”、id=“nameAccount” <div class="layui-col-sm12 layui-col-md4"> <div class="layui-form-item"> <label class="layui-form-label required-
【Layui】input检查限制输入长度
bug制造者
04-21 2318
1、html代码 <divclass="layui-form-item"> <labelclass="layui-form-label">账号<span>*</span>：</label> <divclass="layui-input-block"> <inputclass="layui-input account"name="account"...
Layui input 检查限制输入长度
Crazy的博客
09-24 1万+
layui检查输入字符串长度： html代码 <div class="layui-form-item" > <label class="layui-form-label">账号<span>*</span>：</label> <div class="layui-input-block"> <input class="layui-input account" name="
layui form表单 调整 label 宽度
qq1359236225的博客
11-01 2378
class=“layui-input-block” 改成 style=“margin-left: 112px”情况是这样的，表单里有多个输入框，只有个别label 是长的，我就想调整一下个别长的，其它不变。margin-left 是label 的宽度。
layui设置input高度和table行高度
qiankui的博客
11-01 4745
//input高度 .layui-form-label { padding: 5px 15px; } .layui-input, .layui-select, .layui-textarea { height: 30px; line-height: 30px\9; } .layui-form-select dl dd, .layui-form-select dl dt {...
layUI使用中的一些心得
12-03 2450
目前出现过的一些问题： 1. layui中输入框较短或过长 layui中提供了表单两种形式的长度，分别为 <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">单行输入框</label> ...
layui form表单 动态添加、删除input框，以及数据回显
wowlw411的博客
07-03 8464
layui form表单 动态添加、删除input框，以及数据回显 ** 在form表单中，动态增加input框，最多添加5个，删除校验 ** html代码 <form class="layui-form" th:action="@{/basicInfo/update/project}" method="post"> <div class="layui-form-item" id="last"> <label class="layui-form-label"&
layui输入框中只允许输入整数的实现方法
10-16
今天小编就为大家分享一篇layui输入框中只允许输入整数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
控制input输入框中提示信息的显示和隐藏的方法
09-04
本文将详细讲解如何控制input输入框中提示信息的显示与隐藏，以及实现这一功能的关键步骤和注意事项。 首先，我们需要明确目标：当input输入框获取焦点（即用户点击输入框，光标出现）时，隐藏提示信息；当输入框...
layui实现input框添加tag
04-24
在Layui中，我们可以借助其内置的元素操作和事件处理能力来实现这一功能。 **一、HTML结构** 创建一个基础的input输入框，并为其绑定一个特殊的class，如`layui-input-tag`，以便后续通过JS进行操作： ```html ...
bootstrap布局中input输入框右侧图标点击功能
09-02
在Bootstrap布局中，我们经常需要在input输入框的右侧添加一些功能性的图标，例如清除按钮或切换密码可见性的图标。然而，Bootstrap默认情况下，并不直接支持这些图标触发点击事件。这是因为图标通常作为字体图标...
Layui修改表格分页为英文
qq_46517733的博客
07-24 360
主要记录初次使用Layui没有好好看官方文档踩坑，修改了源码才发现可以自定义使用的Layui版本2.9.14。
怎么在使用select2时，覆盖layui的下拉框样式
qq_36973384的博客
07-24 247
* 改变边框样式 *//* 蓝色边框 *//* 改变边框圆角 *//* 改变背景色 *//* 白色背景 *//* 改变字体样式 *//* 可以在这里添加更多的样式，比如padding, margin, color等 *//* 内边距 *//* 外边距 *//* 注意：改变下拉列表（即选项列表）的样式通常是不可能的，因为它是由浏览器控制的 */
Layui Selcet选择框动态选择问题
最新发布
m0_66648798的博客
07-24 490
时隔多日我也是重新回归写作，高考已经完毕，我将继续我的文章创作，今天我将分享的是我在开发我自己的一个新项目所遇到的问题，这里预告一下我的新项目: VitaApi管理系统 这个系统可以看作是萌新源api管理系统的延续，算是续作吧，也是我为了完成高考前想要写一套不错的api管理系统的愿望，大家后续可以关注一下进展，如果项目完工我也会在各大平台发布通知的。
layui form表单 根据输入框的值，选中单选框
06-13
可以通过监听输入框的输入事件，然后根据输入框的值来选中对应的单选框。以下是一个示例代码： HTML代码： ```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="input" 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="radio" name="radio" value="1" title="选项1"> <input type="radio" name="radio" value="2" title="选项2"> <input type="radio" name="radio" value="3" title="选项3"> </div> </div> </form> ``` JavaScript代码： ```javascript // 初始化form表单 layui.use('form', function(){ var form = layui.form; form.render(); // 监听输入框的输入事件 $('input[name="input"]').on('input', function(){ // 获取输入框的值 var val = $(this).val(); // 根据输入框的值选中对应的单选框 if (val === '1') { $('input[name="radio"][value="1"]').prop('checked', true); } else if (val === '2') { $('input[name="radio"][value="2"]').prop('checked', true); } else if (val === '3') { $('input[name="radio"][value="3"]').prop('checked', true); } // 更新单选框的状态 form.render('radio'); }); }); ``` 上面的代码中，我们监听了输入框的输入事件，然后根据输入框的值选中对应的单选框，并更新单选框的状态。注意，要使用form.render('radio')来更新单选框的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ok060

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值