手机端input[type=date]的时候placeholder不起作用解决方案

最新推荐文章于 2025-06-14 11:00:00 发布
最新推荐文章于 2025-06-14 11:00:00 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 大前端爬坑之路 web移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/84111207
博客探讨了手机端input[type=date]类型的placeholder在不同浏览器中的表现，指出iOS和安卓虽然支持date类型，但placeholder属性失效的问题。为解决这个问题，提出了结合CSS和JS的方法，通过设置input的value和使用伪类模拟placeholder，同时使用JS监听用户选择，动态管理placeholder属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

手机端input[type=date]的时候placeholder不起作用解决方案

 

目前PC端对input 的date类型支持不好，我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。
那么在移动端的话，ios和安卓都是支持的，但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”，但在移动端就是一片空白了。
移动端自带的日期控件确实是个好东西。让用户填写的时候体验很好，很方便。对前端来说可以省去验证日期格式这一步。这么好的东西怎么能舍弃呢。
经过尝试可以设置input的 value值，但必须是日期格式才会正确显示，否则就会直接忽略掉。

 

1

<input type="date" value="2012-05-10" id="date">

但是在需求需要告诉用户此处需要填写的是什么的时候就光是一个日期是不够的。目前的决绝方案是结合css以及JS去解决这一问题。

CSS部分

用伪类去为input模拟一个placeholder

 

<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
uniapp｜实现多端图片上传、拍照上传自定义插入水印内容及拖拽自定义水印位置,实现水印相机、图片下载保存等功能
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
05-28 1万+
本文以基础视角，详细讲解如何在uni-app中实现图片上传→水印动态编辑→图片下载的全流程功能。
H5新特性 input type=date 在手机上默认提示显示无效解决办法
weixin_30539835的博客
09-28 783
目前PC端对input 的date类型支持不好，我试下来的结果是只有chrome支持。firefox、IE11 都不支持。而且PC端有很多日历控件可供使用。就不去多考虑这点了。 那么在移动端的话，ios和安卓都是支持的，但是当type类型是date的时候placeholder属性又会失效。PC端的chrome默认显示是“年/月/日”，但在移动端就是一片空白了。 移动端自带的日期控件确实是个好东...
input的type=“date“时placeholder不显示，解决方案
weixin_42178670的博客
05-18 2557
input的type="date"时placeholder不显示，解决方案 步骤如下： 1、使用伪类模拟 input[type="date"]::before { content: attr(placeholder); } 做完上面之后，会发现在使用的时候即使选了时间，这个placeholder会依旧存在，所以要使用第2步js控制 2、使用js控制placeholder展示与否，假定该时间选择器id=“time” let timeItem = document.getElementById("time"
input的date日期如何改样式
yuzhochaojiwudib的博客
06-14 246
HTML 的 <input type="date"> 元素在样式上通常受到浏览器默认样式的限制，这意味着你不能直接通过 CSS 来改变它的每一个细节，如日期选择器的弹出框样式。如果你需要更深入的自定义，你可以隐藏原生的日期选择器，并使用如 jQuery UI Datepicker、Flatpickr、Picker.js 或其他日期选择器库来代替。你还可以考虑使用 Web 组件来创建自定义的日期选择器。虽然你不能直接更改日期选择器的样式，但你可以更改包含它的容器元素的样式。
input type="date" 提示不显示
sam的博客
08-30 5804
//CSS input[type=&quot;date&quot;]:before{ color:#A9A9A9;content:attr(placeholder); } input[type=&quot;date&quot;].full:before { color:black;content:&quot;&quot;!important; } //HTML &amp;lt;input type=&quot
input type=date 移动端显示placeholder失效问题
S筱潇S四维Smile
03-04 1732
1.html ：监听input失去焦点和获取焦点的事件 &lt;input type="date" id="date" v-model="birthday" placeholder="出生年月日" @blur="inputBlur($event)" @focus="inputFocus($event)" /&gt; 2.css:用伪类去为input模拟一个pl
ios手机系统中 input type=“date“日期控件显示不出来解决方法
farmerXU的博客
07-28 1897
测试给input type="date"要给它加上个val行不行，结果还是没有效果； 最后给它加上宽高以后就显示出来了； <input type="date" class="searchvalue" style="width:125px;height:25px;background-color:white" value=""/>
{extend name="public/base" /} {block name="body"} <link href="/public/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css"> <script src="/public/plugs/datepicker/js/foundation-datepicker.js"></script> <script src="/public/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script> <script type="text/javascript" src="__PUBLIC__/js_manage/account_manage.js"></script> <link rel="stylesheet" href="/application/user/static/css/chat.css" type="text/css"/> <link href="/public/css/callrecord.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src='/public/js/paging.js'></script> <script type="text/javascript" src='/public/js_validation/validation.js'></script> <link href="/public/css/intentionnal_member2.css" rel="stylesheet" type="text/css"/> <div class="row"> <div class="col-lg-12"> <div class=" clearfix fadeInRight animated"> <div class=" main-box"> <header class="main-box-header clearfix callrecord-title"> <div class="pull-left"> <span class="n_panel_title"><img src="__PUBLIC__/img/e_yixiang.png" alt="">客户管理</span> </div> </header> <div class="l_loadfixed" style="display: none;"> <div class="l_loaddata"> <p><img src="/public/img_sj/reload.gif" alt="">正在查询中...</p> <p>由于您的数据过大，加载需要一些时间，我们在努力的加载中...</p> </div> </div> </div> <div class="container-fluid callrecord-bg"> <div class="condition pz_manping_height "> <div class="condition-title"> <img src="__PUBLIC__/img/tiaojianshaixuan.png"> <span>条件筛选</span> <div class="pull-right"> <input type="text" class="form-control c_seachbgimg" id="phone_query" placeholder="请输入号码查询" /> </div> </div> <div class="condition-content"> <div class="form-inline"> <div class="form-group"> <label class="levelSelect">客户姓名:</label> <input type="text" name="" id="name_query" class="form-control width160 marginr30 " value="" placeholder="请输入客户名称"> </div> <div class="form-group"> <label class="levelSelect ">所属坐席:</label> <select class="form-control width160 marginr30" name="" id="sitchair"> <option value="">全部坐席</option> {volist name="seats" id="seat"} <option value="{$seat.id}">{$seat.username}</option> {/volist} </select> </div> <div class="form-group"> <label class="levelSelect ">所属任务:</label> <select class="form-control width160 marginr30" name="" id="config_id"> <option value="">全部任务</option> {volist name="crm_push_config" id="config"} <option value="{$config.id}">{$config.task_name}</option> {/volist} </select> </div> <div class="form-group"> <label class="levelSelect ">创建时间:</label> <input type="text" name="" class="form-control width160 c_datebgimg " id="startCreateDate" value="" placeholder="开始时间"> <script> $('#startCreateDate').fdatepicker({ format: 'yyyy-mm-dd hh:ii', pickTime: true }); </script> <span class="word marginB4">至</span> <input type="text" name="" class="form-control width160 c_datebgimg" id="endCreateDate" value="" placeholder="结束时间"> <script> $('#endCreateDate').fdatepicker({ format: 'yyyy-mm-dd hh:ii', pickTime: true }); </script> </div> </div> <!--<div class="form-inline" style="margin-bottom:8px!important;">--> <!-- <div class="form-group">--> <!-- <label class="levelSelect">通话次数:</label>--> <!-- <input type="number" name="" id="min_call_count" class="form-control width58" value="" >--> <!-- <span class="word marginB4">至</span>--> <!-- <input type="number" name="" id="max_call_count" class="form-control width58" value="">--> <!-- <span class="word marginB4">次</span>--> <!-- </div>--> <!--</div>--> <div class="form-inline" style="margin-bottom:8px!important;"> <div class="form-inline intention"> <div class="form-group"> <label class="levelSelect">意向等级:</label> </div> <div class="form-group intention"> <input type="checkbox" name="grade_all" value=""> <label>全部</label> </div> <div class="form-group intention"> <input type="checkbox" name="grade" value="6"> <label>A级意向</label> </div> <div class="form-group intention"> <input type="checkbox" name="grade" value="5"> <label>B级意向</label> </div> <div class="form-group intention"> <input type="checkbox" name="grade" value="4"> <label>C级意向</label> </div> </div> </div> <script> $("input[name='grade_all']").click(function(){ if ($("input[name='grade_all']").is(':checked')) { $("input[name='grade']").prop("checked",true) } else { $("input[name='grade']").prop("checked",false) } }); $("input[name='grade']").click(function(){ if($("input[name='grade']:checked").length==3){ $("input[name='grade_all']").prop("checked",true) }else{ $("input[name='grade_all']").prop("checked",false) } }); </script> <div class="form-inline" style="margin-bottom:8px!important;"> <div class="form-inline intention"> <div class="form-group"> <label class="levelSelect">通话查看:</label> </div> <div class="form-group intention"> <input type="checkbox" name="call_all" value=""> <label>全部</label> </div> <div class="form-group intention"> <input type="checkbox" name="call" value="1"> <label>已查看</label> </div> <div class="form-group intention"> <input type="checkbox" name="call" value="0"> <label>未查看</label> </div> </div> </div> <script> $("input[name='call_all']").click(function(){ if ($("input[name='call_all']").is(':checked')) { $("input[name='call']").prop("checked",true) } else { $("input[name='call']").prop("checked",false) } }); $("input[name='call']").click(function(){ if($("input[name='call']:checked").length==2){ $("input[name='call_all']").prop("checked",true) }else{ $("input[name='call_all']").prop("checked",false) } }); </script> <div class="form-inline" style="margin-bottom:8px!important;"> <div class="form-inline intention"> <div class="form-group"> <label class="levelSelect">客户分配:</label> </div> <div class="form-group intention"> <input type="checkbox" name="distribution_all" value=""> <label>全部</label> </div> <div class="form-group intention"> <input type="checkbox" name="distribution" value="1"> <label>已分配</label> </div> <div class="form-group intention"> <input type="checkbox" name="distribution" value="0"> <label>未分配</label> </div> </div> </div> <script> $("input[name='distribution_all']").click(function(){ if ($("input[name='distribution_all']").is(':checked')) { $("input[name='distribution']").prop("checked",true) } else { $("input[name='distribution']").prop("checked",false) } }); $("input[name='distribution']").click(function(){ if($("input[name='distribution']:checked").length==2){ $("input[name='distribution_all']").prop("checked",true) }else{ $("input[name='distribution_all']").prop("checked",false) } }); </script> <div class="form-inline intention"> <div class="form-group"> <label class="levelSelect">客户意愿:</label> </div> <div class="form-group intention"> <input type="checkbox" name="desire_all" value=""> <label>全部</label> </div> <div class="form-group intention"> <input type="checkbox" name="desire" value="0"> <label>未分类</label> </div> <div class="form-group intention"> <input type="checkbox" name="desire" value="1"> <label>有意向</label> </div> <div class="form-group intention"> <input type="checkbox" name="desire" value="2"> <label>沟通中</label> </div> <div class="form-group intention"> <input type="checkbox" name="desire" value="3"> <label>试用中</label> </div> <div class="form-group intention"> <input type="checkbox" name="desire" value="4"> <label>已成交</label> </div> </div> </div> <script> $("input[name='desire_all']").click(function(){ if ($("input[name='desire_all']").is(':checked')) { $("input[name='desire']").prop("checked",true) } else { $("input[name='desire']").prop("checked",false) } }); $("input[name='desire']").click(function(){ if($("input[name='desire']:checked").length==5){ $("input[name='desire_all']").prop("checked",true) }else{ $("input[name='desire_all']").prop("checked",false) } }); </script> <div class="record-list"> <div class="customer-list clearfix"> <div class="pull-left"> <img src="__PUBLIC__/img/jiluliebiao.png"> <span>客户列表</span> </div> <button type="button" class="btn btn-primary search" onclick="ajax_member();">查询</button> <!--<button type="button" class="btn-primary" onclick="start()">test</button>--> <div class="btn-op pull-right"> <!--<button type="button" class="btn btn-primary btn-operation" onclick="constomerAdd();">添加客户</button> <button type="button" class="btn btn-primary btn-operation" onclick="constomerImport();">导入</button>--> {php}if(config('export_phone_status') == true):{/php} <!--<button type="button" class="btn btn-primary btn-operation" onclick="validation10();">导出</button>--> {php}endif;{/php} {if $role_id neq 20} <button type="button" class="btn btn-primary btn-operation" onclick="constomerAdd();">添加客户</button> <button type="button" class="btn btn-primary btn-operation" onclick="constomerImport();">导入</button> <button type="button" class="btn btn-primary btn-operation" onclick="validation10();">导出</button> <button type="button" class="btn btn-primary btn-operation" onclick="allocationOfSeats();">分配坐席</button> <!-- <button type="button" class="btn btn-primary btn-operation" onclick="newTask();">建任务呼叫</button> --> <button class="btn btn-primary btn-operation" type="button" data-title="建任务呼叫" onclick="addNewPlan(this);" >建任务呼叫</button> <button type="button" class="btn btn-primary btn-operation" onclick="customer_delete_all();">删除</button> {/if} </div> </div> <table class="table table-bordered table-hover"> <thead> <tr> <th class="text-center"> <input class="icheckbox_square-blue" id="member_all_check" type="checkbox" name='all_checked'> </th> <th class="text-center">序号</th> <th class="text-center">姓名</th> <th class="text-center">电话</th> <th class="text-center">所属任务</th> <th class="text-center">意向等级</th> <th class="text-center">客户意愿</th> <th class="text-center">所属坐席</th> <th class="text-center">创建时间 </th> <th class="text-center">最后跟进时间</th> <th class="text-center">操作</th> </tr> </thead> <tbody id="memberlist"> </tbody> </table> <div class="component-page-empty" id="consumeempty"> <div class="empty-tip line"> <p><img src="__PUBLIC__/img/none.png" /></p> <p>暂无数据</p> </div> </div> <footer class="main-box-footer clearfix footerB"> <div class="row"> <div class="col-sm-3 text-left"><input class="check-all all_checked_count" name='DataCheck_all' type="checkbox"/>全选（已选中<span id="user_count">0</span>条客户）</div> <div class="col-sm-9 text-right paging"></div> </div> </footer> </div> </div> </div> </div> </div> </div> <!--添加拨打弹窗--> <div class="modal fade" id="joinShout" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" style="width:450px; "> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel"> 添加拨打 </h4> </div> <div class="modal-body l-modal-body" style="padding: 20px 20px 3px;"> <form id="addblacklist-number" method="post" id="addForm" class="form-horizontal margintop" enctype="multipart/form-data" > <div class="form-group"> <label class="col-lg-3 control-label">号码：</label> <div class="col-lg-7 col-sm-7"> <input type="text" class="form-control" name="joinPhone" id="joinPhone" value="" readonly /> </div> </div> <p ></p> <div class="form-group"> <label class="col-lg-3 control-label"><span class="asterisk">*</span>线路：</label> <div class="col-lg-7 col-sm-7"> <select name="line_id" id="line_id" class="form-control"> <option value="">请选择</option> {volist name="line_datas" id="vo"} <option value="{$vo['id']}">{$vo['name']}</option> {/volist} </select> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label"><span class="asterisk">*</span>话术：</label> <div class="col-lg-7 col-sm-7"> <select name="scenarios_id" id="scenarios_id" class="form-control"> <option value="">请选择</option> {volist name="scenarioslist" id="vo"} <option value="{$vo['id']}">{$vo['name']}</option> {/volist} </select> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label"><span class="asterisk">*</span>ASR：</label> <div class="col-lg-7 col-sm-7"> <select name="asr_id" id="asr_id" class="form-control"> <option value="">请选择</option> {volist name="asr_list" id="vo"} <option value="{$vo['id']}">{$vo['name']}</option> {/volist} </select> </div> </div> </form> </div> <div class="modal-footer"> <input type="hidden" id="Nowpagehidden" value=""> <input type="hidden" id="Nowlimithidden" value=""> <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button> <button type="button" class="btn btn-primary" id="users_add" onclick="checkform_dial()" > 确定 </button> </div> </div> </div> </div> <div class="modal fade effect" id="effectTmp" tabindex="1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" data-keyboard="false" > <div class="modal-dialog" style="width:365px;"> <div class="modal-content effect-content import"> <div class="modal-header effect-header"> <h4 class="modal-title effect-title" id="singleTel"><span>导入号码</span></h4> </div> <div class="modal-body"> <div class="form-group"> <div class="effect-1"> <span >当前进度</span> <span class="pull-right color90 Progress_value">0%</span> </div> </div> <div class="form-group"> <div class="progress"> <div class="progress-bar progress-bar-data" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only">0%完成</span> </div> </div> </div> </div> <div class="modal-footer effect-footer"> <div>取 消</div> </div> </div> <div class="modal-content effect-content hidden finish"> <div class="modal-header effect-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title effect-title">导入号码</h4> </div> <div class="modal-body"> <div class="form-group effect-flex"> <i class="effect-success"></i> <div class="effect-success-tip" id="effect-tips-content"> </div> </div> </div> <div class="modal-footer effect-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="upload_ok">确定</button> </div> </div> </div> </div> <div class="modal fade effect" id="out_effectTmp" tabindex="1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" data-keyboard="false" > <div class="modal-dialog" style="width:365px;"> <div class="modal-content effect-content import"> <div class="modal-header effect-header"> <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>--> <!--</button>--> <h4 class="modal-title effect-title" id="singleTel"><span>导出号码</span></h4> </div> <div class="modal-body"> <div class="form-group"> <div class="effect-1"> <span >当前进度</span> <span class="pull-right color90 Progress_value">0%</span> </div> </div> <div class="form-group"> <div class="progress"> <div class="progress-bar progress-bar-data" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only">0%完成</span> </div> </div> </div> </div> <div class="modal-footer effect-footer"> <div>取 消</div> </div> </div> <div class="modal-content effect-content hidden finish"> <div class="modal-header effect-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title effect-title">导出号码</h4> </div> <div class="modal-body"> <div class="form-group effect-flex"> <i class="effect-success"></i> <div class="effect-success-tip" id="effect-tips-content_outexcel"> </div> </div> </div> <div class="modal-footer effect-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="upload_oks">确定</button> </div> </div> </div> </div> <div id="show_validation1"></div> <!-- 页面js引入 --> <script src="__PUBLIC__/js_CRM/intentional_member.js" charset="utf-8"></script> <!-- 页面所有弹框引入 --> <script> $(function(){ $('#start_date').val(getFormatDate(10)); $('#end_date').val(getFormatDate(10)); }) //导出数据 function validation10() { $("#export-data").modal('show'); $('#sel_excel').unbind('click'); $('#sel_excel').on('click', function() { var typez = 10; var arr = []; $("input[name='checkids'][type='checkbox']:checked").each(function(i) { arr[i] = $(this).val(); }); if (arr.length <= 0) { alert('请选择导出的数据'); return false; } else { <?php if($is_verification == 1): ?> $('#export-data').modal('hide'); $('#show_validation1').html(html); $('#export_val').attr('onclick','export_val('+typez+')') $('#export-validation').modal('show'); msm_send(); <?php else: ?> $('#export-data').modal('hide'); constomerExport(); <?php endif; ?> } }) } // 电话脱敏函数 function maskPhone(phone) { return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); } // 修改 ajax_member 函数，在填充数据时进行脱敏处理 function ajax_member() { // 假设这里是原有的 ajax 请求代码 // $.ajax({ // url: 'your_api_url', // method: 'GET', // success: function(response) { // var memberlist = $('#memberlist'); // memberlist.empty(); // response.forEach(function(item, index) { // var maskedPhone = maskPhone(item.phone); // 对电话进行脱敏处理 // var row = '<tr>' + // '<td class="text-center"><input type="checkbox" name="checkids" value="' + item.id + '"></td>' + // '<td class="text-center">' + (index + 1) + '</td>' + // '<td class="text-center">' + item.name + '</td>' + // '<td class="text-center">' + maskedPhone + '</td>' + // '<td class="text-center">' + item.task_name + '</td>' + // '<td class="text-center">' + item.intention_level + '</td>' + // '<td class="text-center">' + item.customer_wish + '</td>' + // '<td class="text-center">' + item.seat_name + '</td>' + // '<td class="text-center">' + item.create_time + '</td>' + // '<td class="text-center">' + item.last_follow_time + '</td>' + // '<td class="text-center"><button onclick="editMember(' + item.id + ')">编辑</button></td>' + // '</tr>'; // memberlist.append(row); // }); // } // }); } </script> {include file="member/dialog" /} {include file="member/crm_calldetail" /} {include file="public/crm_tageter"/} {include file="public/call_wedget"/} {/block}
06-12
但是，由于题目要求在当前页面内给出解决方案，并且我们无法修改外部JS文件，因此我们可以考虑在当前页面中重写`ajax_member`函数，或者找到当前页面中填充表格的函数并修改。然而，在提供的代码中，我们并没有看到...
Html5页面上如何禁止手机虚拟键盘弹出
11-21
<input type="text" id="readOnlyInput" readonly placeholder="不可编辑的输入框"> ``` 优点： 1. 实现简单，只需添加`readonly`属性。 2. 在大部分浏览器和设备上都能有效防止虚拟键盘弹出。 缺点： 1. 在iOS的...
nodejs安装我现在就负责把管理员模块前端完善好，你告诉我我怎么做，以下是我现有的管理员模块代码addminadd.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 管理员管理 </title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="lib/loading/okLoading.js"></script> <link rel="stylesheet" href="css/main.css" media="all"> </head> <style> .imgs{display: none;} .picture{display: none;} </style> <body> <div class="x-body"> <form class="layui-form" id="adminadd"> <input type="hidden" name="id" value=""> <div class="layui-form-item"> <label for="username" class="layui-form-label"> <span class="x-red">*</span>登录名 </label> <div class="layui-input-inline"> <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red">*</span>将会成为您唯一的登入名 </div> </div> <div class="layui-form-item"> <label for="phone" class="layui-form-label"> <span class="x-red">*</span>手机 </label> <div class="layui-input-inline"> <input type="text" id="phone" name="phone" required="" lay-verify="phone" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red">*</span>将会成为您唯一的登入名 </div> </div> <div class="layui-form-item"> <label for="role" class="layui-form-label"> <span class="x-red">*</span>用户组 </label> <div class="layui-input-inline"> <select name="group_id"> <option value="">请选择角色</option> <option value="1" >超级管理员</option> </select> </div> </div> <div class="layui-form-item"> <label for="link" class="layui-form-label"> <span class="x-red">*</span>缩略图 </label> <div class="layui-input-inline"> <div class="site-demo-upbar"> <div class=" layui-upload-button" style="border:#FFFFFF ;"> <button type="button" class="layui-btn" id="test1"> <i class="layui-icon"></i>上传图片 </button> <input class="layui-upload" type="file" accept="undefined" id="previewImg" name="img" onchange="upload(this,)"> </div> </div> </div> <a href="javascript:;" style="" class="layui-btn " id="cancel"><i class="layui-icon">ဂ</i>撤销上传</a> </div> <div class="layui-form-item imgs" id="imgshow"> <label class="layui-form-label">缩略图展示 </label> <img src="" id="pimages" name="pimages" style="width: 400px;height: 200px;"/> <input id="avatar" name="image" required="" type="hidden" value=""> </div> <div class="layui-form-item"> <label for="L_pass" class="layui-form-label"> <span class="x-red">*</span>密码 </label> <div class="layui-input-inline"> <input type="password" id="L_pass" name="password" required="" lay-verify="pass" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> 6到16个字符 </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> <span class="x-red">*</span>确认密码 </label> <div class="layui-input-inline"> <input type="password" id="L_repass" name="repass" required="" lay-verify="repass" 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="status" value="1" title="启用" checked="checked"> <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i> <div>启用</div> </div> <input type="radio" name="status" value="0" title="禁用" checked="checked"> <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i> <div>禁用</div> </div> </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> </label> <button class="layui-btn" lay-filter="add" lay-submit=""> 增加 </button> </div> </form> </div> <script src="lib/layui/layui.js" charset="utf-8"> </script> <script src="js/x-layui.js" charset="utf-8"> </script> <script> layui.use(['form','layer'], function(){ $ = layui.jquery; var form = layui.form() ,layer = layui.layer; okLoading.close($); //自定义验证规则 /*form.verify({ nikename: function(value){ if(value.length < 5){ return '昵称至少得5个字符啊'; } } ,pass: [/(.+){6,12}$/, '密码必须6到12位'] ,repass: function(value){ if($('#L_pass').val()!=$('#L_repass').val()){ return '两次密码不一致'; } } });*/ //监听提交 form.on('submit(add)', function(data){ var admindate=$("#adminadd").serialize(); //var data = data.field; $.ajax({ type:'post', url:"xxx", data:admindate, datatype:"json", success:function (data) { if(data.status==1){ layer.msg(data.info,{icon:1,time:1000}); setTimeout(function(){ window.parent.location.reload(); var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); },1000); return false; }else{ layer.msg(data.info,{icon:5,time:2000});return false; } } }) return false; }); }); </script> <script> //轮播图上传 function upload(obj,id) { var formData = new FormData(); formData.append('img', $('#previewImg')[0].files[0]); formData.append('id', id);//将id追加再id中 layer.msg('图片上传中', {icon: 16}); $.ajax({ type:"post", processData: false, contentType: false, url:"xxx", data:formData, success:function(data){ if(data.status == 1){ //console.log(data.image_name); layer.closeAll('loading'); //layer.msg(data.info,{icon:1,time:1000}); $("#pimages").attr('src',data.image_name); $("#avatar").val(data.image_name); $(".imgs").show(); return false; }else{ layer.msg(data.info,{icon:2,time:1000}); } } }); } </script> </body> </html> 和adminlist.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 管理员列表 </title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="lib/loading/okLoading.js"></script> <link rel="stylesheet" href="css/main.css" media="all"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>管理员管理</cite></a> <a><cite>管理员列表</cite></a> </span> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a> </div> <div class="x-body"> <form class="layui-form x-center" action="" style="width:80%"> <div class="layui-form-pane" style="margin-top: 15px;"> <div class="layui-form-item"> <label class="layui-form-label">日期范围</label> <div class="layui-input-inline"> <input class="layui-input" placeholder="开始日" id="LAY_demorange_s"> </div> <div class="layui-input-inline"> <input class="layui-input" placeholder="截止日" id="LAY_demorange_e"> </div> <div class="layui-input-inline"> <input type="text" name="username" placeholder="请输入登录名" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline" style="width:80px"> <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button> </div> </div> </div> </form> <xblock> <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button> <button class="layui-btn" onclick="admin_add('添加用户','adminadd.html','600','500')"><i class="layui-icon"></i>添加</button> <span class="x-right" style="line-height:40px">共有数据：88 条</span> </xblock> <table class="layui-table"> <thead> <tr> <th> <input type="checkbox" name="" value=""> </th> <th> ID </th> <th> 登录名 </th> <th> 手机 </th> <th> 邮箱 </th> <th> 角色 </th> <th> 加入时间 </th> <th> 状态 </th> <th> 操作 </th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 1 </td> <td> admin </td> <td > 1111111111 </td> <td > 1111111@qq.com </td> <td > </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'1',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'1')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','1','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 2 </td> <td> admin1 </td> <td > 1111111111 </td> <td > 111111111@qq.com </td> <td > 超级管理员 </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'2',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'2')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','2','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 3 </td> <td> admin2 </td> <td > 11111111 </td> <td > 11111111@qq.com </td> <td > 超级管理员 </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'3',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'3')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','3','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 4 </td> <td> admin </td> <td > 1111111111 </td> <td > 111111111@qq.com </td> <td > </td> <td> 2019-07-20 17:03:28 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'4',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'4')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','4','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 5 </td> <td> admin </td> <td > 11111111 </td> <td > 111111111@qq.com </td> <td > </td> <td> 2019-07-20 17:03:41 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'5',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'5')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','5','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> </tbody> </table> <div id="page"></div> </div> <script src="lib/layui/layui.js" charset="utf-8"></script> <script src="js/x-layui.js" charset="utf-8"></script> <script> layui.use(['laydate','element','laypage','layer'], function(){ $ = layui.jquery;//jquery laydate = layui.laydate;//日期插件 lement = layui.element();//面包导航 laypage = layui.laypage;//分页 layer = layui.layer;//弹出层 okLoading.close($); //以上模块根据需要引入 /*laypage({ cont: 'page' ,pages: 100 ,first: 1 ,last: 100 ,prev: '<' ,next: '>' }); */ var start = { min: laydate.now() ,max: '2099-06-16 23:59:59' ,istoday: false ,choose: function(datas){ end.min = datas; //开始日选好后，重置结束日的最小日期 end.start = datas //将结束日的初始值设定为开始日 } }; var end = { min: laydate.now() ,max: '2099-06-16 23:59:59' ,istoday: false ,choose: function(datas){ start.max = datas; //结束日选好后，重置开始日的最大日期 } }; document.getElementById('LAY_demorange_s').onclick = function(){ start.elem = this; laydate(start); } document.getElementById('LAY_demorange_e').onclick = function(){ end.elem = this laydate(end); } }); //批量删除提交 function delAll () { layer.confirm('确认要删除吗？',function(index){ //捉到所有被选中的，发异步进行删除 layer.msg('删除成功', {icon: 1}); }); } /*添加*/ function admin_add(title,url,w,h){ x_admin_show(title,url,w,h); } /*停用*/ function admin_stop(obj,id,e){ layer.confirm(e==1?'你确定要启用吗？':'你确定要禁用吗？',{icon: 3, title:'提示'},function(index){ $.ajax({ type:"post", url:"xxx", data:{id:id,status:e}, dataType:"json", success:function(data) { if(data.status==1){ //发异步把用户状态进行更改 $(obj).attr("class","layui-btn layui-btn-danger "); $(obj).text("隐藏"); $(obj).remove(); layer.msg(data.info,{icon: 6,time:1000}); setTimeout(function(){ window.location.reload(); },1000);return false; }else{ //发异步把用户状态进行更改 $(obj).attr("class","layui-btn layui-btn-normal "); $(obj).text("显示"); $(obj).remove(); layer.msg(data.info,{icon: 5,time:1000});return false; } } }); }); } /*启用*/ function admin_start(obj,id){ layer.confirm('确认要启用吗？',function(index){ //发异步把用户状态进行更改 $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="admin_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon"></i></a>'); $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>'); $(obj).remove(); layer.msg('已启用!',{icon: 6,time:1000}); }); } //编辑 function admin_edit (title,url,id,w,h) { url = url+"?id="+id; x_admin_show(title,url,w,h); } /*删除*/ function admin_del(obj,id){ layer.confirm('确认要删除吗？',function(index){ //发异步删除数据 $(obj).parents("tr").remove(); layer.msg('已删除!',{icon:1,time:1000}); }); } </script> </body> </html>，这是我的admin.js:// js/admin.js const AdminManager = { // 获取所有管理员 getAll: function() { return JSON.parse(localStorage.getItem('admins')) || []; }, // 保存所有管理员 saveAll: function(admins) { localStorage.setItem('admins', JSON.stringify(admins)); }, // 获取单个管理员 getById: function(id) { return this.getAll().find(item => item.id == id); }, // 添加或更新管理员 save: function(admin) { let admins = this.getAll(); if (admin.id) { // 更新 const index = admins.findIndex(a => a.id == admin.id); if (index !== -1) { admins[index] = admin; } } else { // 新增 admin.id = this.generateId(); admin.create_time = new Date().toLocaleString(); admins.push(admin); } this.saveAll(admins); return admin; }, // 删除管理员 delete: function(id) { let admins = this.getAll().filter(a => a.id != id); this.saveAll(admins); }, // 生成ID generateId: function() { const admins = this.getAll(); return admins.length > 0 ? Math.max(...admins.map(a => a.id)) + 1 : 1; } }为什么运行出来添加删除键点了没反应，能帮帮我吗
最新发布
07-04
解决方案步骤：步骤1：检查前端请求-使用浏览器开发者工具（Network选项卡）查看添加/删除操作发出的请求。-确认请求的URL、方法（GET/POST等）是否正确。-检查请求是否成功发送（状态码是否为200或预期状态码），...
ios、移动端 input type=date无法点击的问题解决方法
weixin_30411997的博客
01-15 1443
正常用input type = “text”,获取焦点的时候，将type 改成 date即可。 <div class="form-item"> <label for="birthday" class="property">生日</label> <input class="input-item" type="text" id="...
关于IE11浏览器input标签type=“date“ 不显示日期控件的解决
qq_51745363的博客
03-13 1750
问题：写了input标签且type=”date“，但是在IE浏览器不兼容。
input date显示类似placeholder效果 ios安卓兼容
JIZQAQ学习&踩坑笔记本
01-24 683
先叨叨一个踩坑历程。 我最开始是使用了类似下面这种方式，最开始type为text，当进行点击后换成date。 在pc端测试的时候看起来还不错，但是到手机上测试发现，需要双击那个框框才能做到出现日历供选择。 &lt;input type="text"onfocus="(this.type='date')" placeholder="Start Date"value=""/&gt; 后...
【uniapp】小程序中input输入框的placeholder-class不生效以及解决办法
ONLYSRY的博客
08-30 4214
【uniapp】小程序中input输入框的placeholder-class不生效以及解决办法。
初学者：微信小程序中input使用forcus属性不起作用
redrose311的博客
03-11 1121
<input focus="true" type="number"/> 经测试，微信开发者工具中focus自动获取焦点并调出键盘，但是并没有起作用，用手机预览时，是可以看到效果的。暂时还没有找到解决办法
微信小程序文本输入＜input/＞ 详解
热门推荐
代码小疯子
12-12 2万+
在微信小程序开发中，input 用来实现文本输入，如输入用户名密码等等
ios手机系统中 input type="date"日期控件显示不出来解决方法
qym147962的博客
05-07 6343
最新做的微信网页测试的时候发现写的日期输入框在ios手机怎么也显示不出来，在安卓系统，pc端都可以正常显示，后面网上查了一下，原因最多的是用了 -webkit-user-select: none; 把这个属性去掉或者改成 -webkit-user-select: auto !important; 但是我试了之后还不行，后面请教了大神，说ios写日期控件 ...
实现input中date类型的placeholder功能
qq_36438460的博客
02-27 3220
在HTML5中，input新增了date的类型 如果我们想实现placeholder的显示，不可以直接设置placeholder属性 要想实现以下样式 点击前 点击后 可以采用事件绑定addEventListener和事件解绑removeEventListener来实现，代码如下： <input type="text" id="inputDate" placehol...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

慕容屠苏

你的鼓励是我最大的动力

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

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

打赏作者

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

抵扣说明：

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

余额充值