栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

必需的属性在Safari浏览器中不起作用

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

必需的属性在Safari浏览器中不起作用

Safari(自2017年3月26日起最新版本10.1)不支持此属性,您需要使用Javascript。

该页面包含一个hacky解决方案,该解决方案应添加所需的功能:

HTML:

<form action="" method="post" id="formID">    <label>Your name: <input required></label><br>    <label>Your age: <input required></label><br>    <input type="submit"></form>

Javascript:

var form = document.getElementById('formID'); // form has to have ID: <form id="formID">form.noValidate = true;form.addEventListener('submit', function(event) { // listen for form submitting        if (!event.target.checkValidity()) { event.preventDefault(); // dismiss the default functionality alert('Please, fill the form'); // error message        }    }, false);

您可以用不太丑陋的警告代替警报,例如显示带错误消息的DIV:

document.getElementById('errorMessageDiv').classList.remove("hidden");

在CSS中:

.hidden {    display: none;}

并在HTML中:

<div id="errorMessageDiv" >Please, fill the form.</div>

这种方法的唯一缺点是它不能处理需要填写的确切输入。它将需要一个循环遍历表单中的所有输入并检查值(更好的是,检查“必需”属性的存在)。

循环看起来像这样:

var elems = form.querySelectorAll("input,textarea,select");for (var i = 0; i < elems.length; i++) {    if (elems[i].required && elems[i].value.length === 0) {        alert('Please, fill the form'); // error message        break; // show error message only once    }}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/464946.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号