layer系列之弹层layer.prompt
layer官网:https://www.layui.com/doc/modules/layer.html
layer在线调试:http://layer.layui.com/
如何使用layer.prompt在输入值为空的情况下点击确定继续执行逻辑?
使用layer.open实现方式:
附:源码如下
layer.open({
//formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框
title: '是否确信将账号临时挂账?',
area: ['300px', '240px'],
btnAlign: 'c',
closeBtn:'1',//右上角的关闭
content: `<div><p>备注:</p><textarea name="txt_remark" id="remark" style="width:200px;height:80px;"></textarea></div>`,
btn:['确认','取消','关闭'],
yes: function (index, layero) {
var value1 = $('#remark').val();//获取多行文本框的值
alert('您刚才输入了:' + value1);
layer.close(index);
//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方
},
no:function(index)
{
alert('您刚才点击了取消按钮');
layer.close(index);
return false;//点击按钮按钮不想让弹层关闭就返回false
},
close:function(index)
{
alert('您刚才点击了关闭按钮');
return false;//点击按钮按钮不想让弹层关闭就返回false
}
});
附:layer.open中按钮点击事件:
layer.open({
content: 'test'
,btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
//按钮【按钮一】的回调
},btn2: function(index, layero){
//按钮【按钮二】的回调
alert('这是点击了按钮二');
return false;//点击后不关闭窗口,需返回false
},btn3: function(index, layero){
//按钮【按钮三】的回调
alert('这是点击了按钮三');
return false;//点击后不关闭窗口,需返回false
}
,cancel: function(){
//右上角关闭回调
}
});
用layer.open可以实现弹出文本框及按钮事件,layer.prompt也是在layer.open基础上的封装.....
使用layer.prompt时,
如果文本框输入值是空的话点击确定没有反应,不能向下执行。
但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做??
注:使用layer.prompt时,layer使用的版本为layer-v3.0
官方代码说明如下:
//prompt层新定制的成员如下
{
formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
value: '', //初始时的值,默认空字符
maxlength: 140, //可输入文本的最大长度,默认500
}
//例子1
layer.prompt(function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
//例子2
layer.prompt({
formType: 2,
value: '初始值',
title: '请输入值',
area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
示例代码如下:
layer.prompt({
formType:2,
title:'请填写排除原因(注:必填项)',
area:['500px','150px'],
btnAlign:'c'
},function(value,index,elem){
alert(value);
laker.close(index);
});
由官网查看文档可知layer.prompt也是继承layer.open的,所以改成如下所示:
layer.prompt({
formType:
2
,
title:
'请填写排除原因(注:必填项)'
,
area: [
'500px'
,
'150px'
],
btnAlign:
'c'
,
yes: function(index, layero){
// 获取文本框输入的值
var value = layero.find(
".layui-layer-input"
).val();
if
(value) {
alert(
"输入值为:"
+ value);
layer.close(index);
}
else
{
alert(
"输入值为空!"
);
}
}
});

layer.prompt({
formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框
title: '是否确信将账号临时挂账?',
area: ['300px', '100px'],
btnAlign: 'c',
content: `<div><p>备注:</p><textarea name="txt_remark" id="remark" style="width:200px;height:80px;"></textarea></div>`,
yes: function (index, layero) {
var value1 = $('#remark').val();//获取多行文本框的值
alert('您刚才输入了:' + value1);
//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方
}
});
效果如下:
layer系列之弹层layer.prompt的更多相关文章
- 基于layer简单的弹层封装
/** * 产生长度为32的Guid字符串 */ function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Mat ...
- 弹出层layer的使用
弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- layer弹层基本参数初尝试
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery layer弹窗弹层插件 小巧强大
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- 牛逼的 弹出层 layer !!!
功能强大,实用,操作方便,文档齐全. http://layer.layui.com/api.html 常用功能代码: <!doctype html> <html> <he ...
- jquery layer弹窗弹层插件 (转)
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- 非常好用的弹出层 layer,常用功能demo,快速上手!
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用.老文档地址:http://layer.layui.com/api.html 已经停止维护 新文档地址:htt ...
- layer弹层
获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可. 注意:引入layer.js前必须先引入jquery1. ...
随机推荐
- C++中的深拷贝和浅拷贝构造函数
1,对象的构造在实际工程开发当中是相当重要的,C++ 中使用类就要创建对象,这 就涉及了对象的构造,本节课讲解对象的构造和内存操作方面的问题: 2,实际工程开发中,bug 产生的根源,必然的会有内存操 ...
- 配置多个broker
前言 什么是kafka?举个例子,生产者消费者,生产者生产鸡蛋,消费者消费鸡蛋,生产者生产一个鸡蛋,消费者就消费一个鸡蛋,假设消费者消费鸡蛋的时候噎住了(系统宕机了),生产者还在生产鸡蛋,那新生产的鸡 ...
- 2019 Multi-University Training Contest 2 - 1011 - Keen On Everything But Triangle - 线段树
http://acm.hdu.edu.cn/showproblem.php?pid=6601 首先要贪心地想,题目要最长的边长,那么要怎么构造呢?在一段连续的区间里面,一定是拿出最长的三根出来比,这样 ...
- spark(2)
1.spark模块 -------------------------------------- (1)Spark Core //核心库 (2)Spark SQL //核心库 (3)Spark Str ...
- Linux系统性能测试工具(三)——内存性能综合测试工具lmbench
本文介绍关于Linux系统(适用于centos/ubuntu等)的内存性能综合测试工具-lmbench.内存性能测试工具包括: 内存带宽测试工具——mbw: 内存压力测试工具——memtester: ...
- qt01 lineEdit pushButton
1. void udp_server::on_lineEdit_textEdited() { ui->pushButton->setEnabled(ui->lineEdit-> ...
- C#基础知识之事件和委托
本文中,我将通过两个范例由浅入深地讲述什么是委托.为什么要使用委托.委托的调用方式.事件的由来..Net Framework中的委托和事件.委托和事件对Observer设计模式的意义,对它们的中间代码 ...
- 【u-boot-2018.05】make配置过程分析
https://blog.csdn.net/q_z_r_s/article/details/80718518 从u-boot-2014.10版本引入Kbuild系统之后,Makefile的管理和组织跟 ...
- ztree 获取CheckBox选中节点时,不获取选中上级父节点
//将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...
- bzoj3091 城市旅行 LCT + 区间合并
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=3091 题解 调了整个晚自习才调出来的问题. 乍一看是个 LCT 板子题. 再看一眼还是个 LC ...