HTML input标签required自定义提示文本且防止多次弹出提示

摘要:
˂inputtype=“text”name=“objName”requiredonkyup=“this.value=this.value.replace”oninvalid=“setCustomValidity”oninput=“set自定义有效性('')”。即使在再次输入值后,仍会提示“请输入名称”。我没办法。我刚刚添加了一个方法来触发输入。
 <input type="text" name="objName" required  onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" oninvalid="setCustomValidity('请输入名称')" oninput="setCustomValidity('')" /> 

此处放一个链接:HTML input标签required自定义提示文本

如上代码所示:onkeyup为清除空格,oninvalid为自定义的提示信息

提交时会自动提示。

此处有个小问题:这个提示会一直存在。只要第一次提交时,input为空。即使再次输入值之后,依旧一直提示“请输入名称”。

不知道为什么,测试就一直还会出现提示让输入名称。

没办法,就自己加了一个触发oninput的方法,才得以解决。代码如下:

$("input name='objName'").on('input propertychange',function(){this.setCustomValidity('');});

免责声明:文章转载自《HTML input标签required自定义提示文本且防止多次弹出提示》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇html5实现移动端下拉刷新(原理和代码)python 环境-----项目的包,打包方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

input标签与label标签的“合作关系”

一直忽略了input和label的关系。一次在做自定义单选框的时候又重新捡起来这对“兄弟”。 label的for属性和input的id值一致的话,input和label就会组成一个组。例如: <label for="test"> <input type="checkbox" id="test" abc="1111" /> &...

h5固定表头公共样式

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <meta content="yes" name="apple-mo...

前端用js获取本地文件的内容

这里要写成input的形式 调用upload函数 传递的参数就表示所选的文件<input type="file" onchange="upload(this)" /> //前端读取本地文件的内容 下面代码中的this.result即为获取到的内容 function upload(input) { //支持chrome IE10...

自定义组件支持双向绑定的实现

  假设有这样一个单文件组件:CustomerInput.vue,其内容如下: <template> <div> <input v-bind:value="value" v-on:input=$emit('input', $event.target.value)""></input&...

使用js设置input标签只读 readonly 属性

先上代码: <html> <head> <title> test </title> <meta charset="utf-8"> </head> <script language="JavaScript"> function setReadon...

HTML静态网页(图片热点、网页划区、拼接及表单的使用)

图片热点:   规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果。 示例: 网页划区:   在一个网页里,规划出一个区域用来展示另一个网页的内容。 示例:   网页的拼接:   在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展示出来。 示例: 表单: <form id="" name="" method="p...