精华内容
下载资源
问答
  • layui列表如何取input框的

    千次阅读 2021-02-06 23:35:27
    layui列表如何取input框的发布时间:2020-09-21 11:30:46来源:亿速云阅读:374作者:小新这篇文章主要介绍了layui列表如何取input框的,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有...

    layui列表如何取input框的值

    发布时间:2020-09-21 11:30:46

    来源:亿速云

    阅读:374

    作者:小新

    这篇文章主要介绍了layui列表如何取input框的值,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

    我们先创建一个input,样式名就为layui-input。然后关键为其添加一个id值。

    fbda9cee274546969424dd006d068869.png

    接着添加一个按钮,有一个onclick事件,用来触发获取值。

    769b090a69c2122b9d019e287eda8270.png

    在脚本代码里,定义一个函数,就是按钮点击后触发的。

    我们可以使用document.getElementById来获取输入框,参数就是输入框的id值。

    7ba823c811f95a5c67e892f0ddb2130b.png

    输入框获取到后,就可以使用它的value属性来获取输入

    展开全文
  • layui form表单input获取回车事件[toc]layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...

    layui form表单input获取回车事件

    [toc]

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

    问题

    在使用layui的过程中经常会用到单独的表单组件,有一些layui封装好的功能经常用不到。例如表单的提交。如果单独需要一个文本输入框,点击了回车后就会进行表单提交,页面刷新。这是我们不想看到的结果

    解决

    html:

    js:

    //搜索框回车事件

    $('#searchText').on('keydown', function (event) {

    if (event.keyCode == 13) {

    return false

    }

    });

    enter键的ASCII是13

    展开全文
  • layui 获取input 的自定义属性和

    千次阅读 2020-05-04 15:18:05
    HTML表格页面中 使用data-xxxx="xxxx" 来定义属性和 <script type="text/... <input type="checkbox" name="si_state" data-si_id="{{d.si_id}}" data-ei_id="{{d.ei_id}}" data-si_name="{{d....

    HTML表格页面中 使用data-xxxx="xxxx" 来定义属性和值

    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="si_state" data-si_id="{{d.si_id}}" data-ei_id="{{d.ei_id}}" data-si_name="{{d.si_name}}" lay-skin="switch" lay-text="正常|停用" lay-filter="states" {{ d.si_state == 0 ? 'checked' : '' }}>
    </script>

    JS中获取自定义的属性和值

        //监听状态操作
        form.on('switch(states)', function(obj){
    
            var si_id = $(obj.elem).attr("data-si_id");
            var si_name = $(obj.elem).attr("data-si_name");
            var ei_id = $(obj.elem).attr("data-ei_id");
    
            //console.log(si_id + '-----------' + si_name + '-----------' + ei_id);
               
            //是否选中状态
            var si_state=1;
            if(obj.elem.checked){
                si_state=0;
            }
    
            //ajax
    
        }

    实现功能:

    展开全文
  • 保存layui表格里input标签的数据

    千次阅读 2019-07-27 15:07:17
    上次写到了在layui表格里面加入input标签, 并且设置input标签的类型为时间格式,使数据顺序整齐排列在表格里,并且可以在layui表格里同时对多条数据进行编辑。 那么,现在,问题又来了:如何同时保存在layui表格里面...

    保存layui表格里input标签的数据

    上次写到了在layui表格里面加入input标签, 并且设置input标签的类型为时间格式,使数据顺序整齐排列在表格里,并且可以在layui表格里同时对多条数据进行编辑。
    那么,现在,问题又来了:如何同时保存在layui表格里面编辑的多条数据呢?
    在创建table标签时,我给它套了一个form表单,layui表格里面的input标签也按照form表单里面的input标签的格式设置了对应的name。所以,layui表格里面的数据就如同form表单里面的数据一样,可以被序列化出来。

    在这里插入图片描述

    从上图,我们可以看到,被序列化出来的21条input标签的数据,其中每一条数据都有其他几条name是相同的数据,但是,细心观察,你会发现,这些数据都是按顺序排列的,并且如同你在layui表格排列数据的顺序一样。(仅限添加了input标签的)
    如果将数据就这样通过“post”提交到控制器,控制器只会读取到表格的第一行数据,无法同时读取多条数据。
    既然控制器无法同时读取多条数据,我就想到在把数据在通过post提交之前先处理一下,把layui表格的数据一行一行地提交出来。
    前面也提到,被序列化出来的数据都是虽然很多name相同,但数据排列规律。仔细观察上图中的21条name,你可以发现,这些数据每7条为一组,即相当于每7条为layui表格的一行数据。那么,我就想到,是不是可以把数据分开提交,按照上图数据排列的规律,一次获取7条提交保存。
    先通过序列化方法将layui表格的数据全都获取到,然后判断是否有数据,没有就弹出提示;然后分别为每一个name都声明一个字段接收数据,再声明一个字段记录提交数据的次数。然后通过for循环将序列化出来的数据一行一行地循环获取。这里我用到了一个正则表达式,这个正则的意思是只可以输入0和非0开头的整数。上面说过数据每7条为layui表格的一行数据,所以 一次要获取7条,而序列化出来的数组的长度也是7的倍数,所以,在for循环里面,将代表条数的i除以7,“/”相当于除号。用正则表达式筛选i除以7的结果,当i除以7为整数时,就进入获取数据,通过上图可以看到,值在value里面,所以通过“value”获取,一次获取7个数据,通过post提交到数据库保存。“trues++”记录提交的次数,然后根据次数对layui表格的每一行数据进行提示,最后刷新表格。

    	//批量修改时间
        Regex=/^(0|[1-9][0-9]*)$/
        function save() {
            var forDate = $("#formUpdateWork").serializeArray();
            var formDate;
            if (forDate.length > 0) {
                var trues='';
                var WorkDetailID = '';
                var PlanStartDate='';
                var PlanEndDate='';
                var ActualStartDate='';
                var ActualEndDate='';
                var WorkID=''; var ProgressPlanID='';
                for (var i = 0; i < forDate.length; i++) {
                    var text=i/7;
                    if(!Regex.test(text)){
                        WorkDetailID = ''; PlanStartDate=''; PlanEndDate='';
                        ActualStartDate=''; ActualEndDate='';
                        WorkID=''; ProgressPlanID='';
                    }
                    else {
                        WorkDetailID = forDate[i].value;
                        PlanStartDate = forDate[i+1].value;
                        PlanEndDate = forDate[i+2].value;
                        ActualStartDate = forDate[i+3].value;
                        ActualEndDate = forDate[i+4].value;
                        WorkID = forDate[i+5].value;
                        ProgressPlanID = forDate[i+6].value;
                        $.post("/ProjectManagement/ProgressOfWorks/SavaWorkDetail",
                            {
                                WorkDetailID:WorkDetailID,
                                PlanStartDate:PlanStartDate,
                                PlanEndDate:PlanEndDate,
                                ActualStartDate:ActualStartDate,
                                ActualEndDate:ActualEndDate,
                                WorkID:WorkID,
                                ProgressPlanID:ProgressPlanID
                            },
                            function(data){
                                trues++;
                                layer.msg("第"+trues +"条"+data.Text,{icon:0});
                                if(data.State==true){
                                    tabSonWork = layuiTable.reload('tabSonWork');
                                }
                            });
                    }
                }
            }
            else {
                layer.alert("请选择要修改的数据", { icon: 0 });
            }
    	 }
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    控制器方法:因为name相同,这里可以不用一个一个地声明参数,可以直接声明表。然后判断数据是否为空,为确保数据的准确,我又提供ID再查询一次数据,在对数据进行赋值,这里只显示一条赋值就不一一列举了,但格式都是一样的。然后修改保存;根据数据保存的状态返回相应的提示内容。

    在这里插入图片描述

    展开全文
  • layui设置 input 只能输入正整数

    千次阅读 2019-07-13 17:08:13
    input name="amount" class="layui-input " value="" placeholder="请输入金额" autocomplete="off" type="number" required maxlength="11" onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=...
  • 属性可以是 :required必填项, phone手机号,email邮箱,url网址,number数字,date日期,identity身份证。这个相当于正则判断,当然你也可以定义自己的正则,做一些复杂的判断,例如: <input type="text" ...
  • layui-input-block和layui-input-inline的区别

    万次阅读 2019-11-03 18:51:23
    一个是一个表单元素占一行,竖着,以例表的形式排列。 另一个允许,多个表单控件占一行,横着,一行可以放置多个表单元素。
  • 我是 为了 简单 使用 直接 用的 jquery,小例子直接上...//这个是获取父页面中全局变量的(是json格式的)$(‘#ID‘).val(json.id);//通过id给标签赋值$(‘#username‘).val(json.username);$(‘#sex‘).val(json.s...
  • layui的表单控件的input文本框赋值

    万次阅读 2020-01-08 11:01:37
    table.on('tool(org-table)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的" var data = obj.data; //获得当前行数据 var layEvent = obj.event; ...
  • layui时间输入框设置默认值

    千次阅读 2021-01-14 03:44:35
    效果展示: html标签起始日期:截止日期:导入layui对象laydate和设置时间layui.use(['admin', 'table', 'form', 'laydate'], function () {var $ = layui.$, admin = layui.admin, table = layui.table, form = ...
  • layui 参照赋值的两种方式

    千次阅读 2020-12-30 08:51:24
    前言上一篇解决了,在layui中子页面传值回父页面的问题。这一篇主要总结:子页面传值回父页面后,赋值的两种方式:文本框赋值;表格赋值。文本框赋值文本框赋值的方式,相对的简单。只需获取到子页面的后,转换成...
  • 今天遇到一个问题,客户要求select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能,百度了一下,都是讲select配合inputinput覆盖在select上面,同时又不完全盖住...
  • layui form input获取不到

    万次阅读 2018-07-11 10:37:21
    layui form 如果使用submit,input用$(elem).val()获取不到。只能用submit回调里的data,把input附上name.data里就会用input
  • layui 如何获取提交表单中input值

    万次阅读 2019-05-14 17:58:26
    <form action="#" class="layui-form"> <div class="form_table"> <div class="form_header"> <span>账号/手机登录</span> </div> ...
  • layui-弹出层-input显示

    千次阅读 2019-11-15 10:18:23
    数据显示使用data-th-value=" “;但data-th-text=” “会直接显示在页面的输入框上 输入框验证:意思是id不能为空,必填 ...input class="layui-input" data-th-value="${user?.userName}" name="use...
  • <div class="layui-form-item" > <label class="layui-form-label">...div class="layui-input-block" id="last"> <div class="layui-input-inline"> {empty name="$ways"} <div .
  • layui表格里加入input标签

    万次阅读 2019-07-27 15:01:45
    问题:如何在表格里添加input标签,并且设置input标签的类型为时间格式,即将input标签的“type”设置为“date”,然后在编辑完input标签里面的内容后,将新编辑的内容保存呢? layui表格虽然有可编辑的表格,但是...
  • 前几天用layui刚好在表单中用到这个, 期间也有几个问题, 百度了一下关于这个的文章几乎没有. 本着骗取访问量的原则, 呃...不对, 帮助别人的原则, 在这里记录一下 1.使用 在页面中引入 layui.config({ base: '/...
  • author:咔咔 wechat:fangkangfk 有时候会出现input的无法点击...在这段代码中,我检测到layui-unselects这个元素的控制样式的,所以使用jquery来判断是否存在layui-from-checked这个class。 然后进行批量添...
  • 一、input的onchange事件 html <input type="number" name="xxxx" class="accounting_entry_credit_amount" id="" value=""> js /** * 会计分录-借方金额 * @param [description] * @return {[type]...
  • Layui实现input输入和选择的方法:HTML代码:移交单位*111222333444555其中input的几个style样式简单说一下。position:absolute 在这里是让input和select在同一位置。z-index:2 是为了让input在select上面。width:80...
  • layuiinput框禁填置灰

    千次阅读 2020-12-24 11:38:13
    $("#zhsbmc_name").attr("disabled", true).addClass('layui-disabled');
  • 1 <div class="layui-col-md4"> 2 <label class="layui-form-label">移交单位<span style="color:red">*</span></label> 3 <div class=...
  • 后端取出的 <div class="layui-form-item" style="position: relative;z-index: 10;"> <label class="layui-form-label">...div class="layui-input-block" lay-filter="selFilter"> <selec
  • } ,success: function(layero, index){ // 方式一 其实就是获取的 子页面的 ... 以上这篇layui 对弹窗 form表单赋值的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
  • form.on('checkbox(checkbox)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //是否被选中,true... //复选框value,也可以通过data.elem.value得到 .
  • 动态设置layui的select

    千次阅读 2019-06-22 20:44:05
    html5中加上下类代码获取初始。 <input id="ggg" style="display: none;" value="{$hopedepart}" /> <input id="ddd" style="display: none;...之后js中设置select和单选框的。 <scrip...
  • 所以可以搜索的select也是用这个layui的技术解决的,layui本身的select 已经支持搜索功能但是呢,我们的需求是,手动输入,如果下拉框有就用下拉框,没有则用input输入框中的,这点layui的的select 就无法解决。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,122
精华内容 2,448
关键字:

layui值设置input