- 外文名
- input
- 类 别
- 函数
- 含 义
- 输入数据源
- 组 成
- 两个文本输入框和一个提交按钮
-
vue监听input输入事件-oninput
2017-05-25 19:14:06.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址: .vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput。....vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址: .vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput。
oninput 事件在用户输入时触发,菜鸟教程中的用法是:
但是在.vue中这样写是没有作用的:
<input type="text" id="cardsNum2" value="1" @oninput ="inputFunc">
这样写也没有作用:
<input type="text" id="cardsNum2" value="1" v-on:oninput ="inputFunc">
最后,这样写才起作用:
<input type="text" id="cardsNum2" value="1" v-on:input ="inputFunc">
希望这篇文章对您有所帮助!
个人微信公众号:侦探小禾子,闲聊育儿生活星座塔罗牌,野生法考通过者免费法律咨询,欢迎关注!
-
我的 Input框 不可能这么可爱
2019-09-03 13:27:35input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识...- 作者:陈大鱼头
- github: KRISACHAN
<input />
标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whatwg 跟 MDN 的时候发现 跟<input />
有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。本篇文章默认大家已经知道
<input />
标签的基本用法,不会做过多的基础说明~没想到,这些选择器居然跟 input …
到写文章为止,根据最新的 drafts 指出,一共有3大类,16种跟 input 相关的选择。其实都挺有用的,善用它们,会让我们的用户体验更加美好。
下面我们来分享一下这3大类选择器的作用:
第一类:控制系(Input Control States)
选择器 作用 :enabled 选择可使用状态的 <input />
元素:disabled 选择不可使用状态的 <input />
元素:read-only 选择不可编辑状态的元素(不仅仅是 <input />
):read-write 选择可编辑状态的元素(不仅仅是 <input />
):placeholder-shown 选择 placeholder text 显示时的元素 :default 选择在 <button>
,<input type="checkbox" />
,<input type="radio" />
, 以及<option>
上的默认状态第二类:输出系(Input Value States)
选择器 作用 :checked 选择处于选中状态的 <input type="radio" />
:indeterminate 选择状态不确定的表单元素与 <progress>
第三类:侦查系(Input Value-checking)
选择器 作用 :blank 选择处于空值时的 <input>
,暂未被浏览器支持:valid 选择验证通过的表单元素 :invalid 选择验证不通过的表单元素 :in-range 选择处于指定范围内的 <input />
:out-of-range 选择不处于指定范围内的 <input />
:required 选择必填的表单元素 :optional 选择选填的表单元素 :user-invalid 选择用户输入但值非法时的 <input />
,暂未被浏览器支持可怕,除了选择器,居然还跟这些属性有关系
<input>
除了有很多相关的选择器,结合不同的type还有不同的属性可以供使用。他们的作用如下:属性 作用 maxlength 可输入的最大长度 minlength 可输入的最小长度 size 输入框的长度 readonly 输入框是否只读 required 输入框是否必填 multiple 输入框是否可以多选 pattern 输入框验证规则 min 可输入的最小值 max 可输入的最大值 step 输入框每次的增量 list 输入框绑定的可选值数据 placeholder 输入框预选文字 实战
通过上面的三类说明,我们大致了解了
<input />
标签的相关信息,但是你们以为我是来列list的吗?当然不是,还有实操啊~
纯CSS实现表单提交功能
首先我们来看个效果图
上面的效果就是一个纯CSS实现的表单提交功能,这是怎么实现的呢?下面我们直接看源码,然后一步一步地来分拆(不想看的可以直接CV下面的源码自己做测试~)
<style> :root { --error-color: red; } .form > input { margin-bottom: 10px; } .form > .f-tips { color: var(--error-color); display: none; } input[type="text"]:invalid ~ input[type="submit"], input[type="password"]:invalid ~ input[type="submit"] { display: none; } input[required]:focus:invalid + span { display: inline; } input[required]:empty + span { display: none; } input[required]:invalid:not(:placeholder-shown) + span { display: inline; } </style> <form class="form" id="form" method="get" action="/api/form"> 账号: <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required /> <span class="f-tips">请输入正确的账号</span> <br /> 密码: <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required /> <span class="f-tips">请输入正确的密码</span> <br /> <input name="button" type="submit" value="提交" /> </form>
第一步:写好基础结构
首先我们来把基础结构给写好,代码如下:
<style> :root { --error-color: red; } .form > input { margin-bottom: 10px; } .form > .f-tips { color: var(--error-color); display: none; } </style> <form class="form" id="form" method="get" action="/api/form"> 账号: <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required /> <span class="f-tips">请输入正确的账号</span> <br /> 密码: <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required /> <span class="f-tips">请输入正确的密码</span> <br /> <input name="button" type="submit" value="提交" /> </form>
扫一眼,嗯,挺简单的,都是常用的东西。咦,不对,这个
pattern
是什么东西?在这里我们重点分享下
pattern
这个属性,这是一个用来验证input[value]
是否合法的属性,里面的内容就是匹配value的,语法便是正则的语法,例子如下:<label> <!-- 当前pattern的内容就是验证input[name="part"]的value的,其规则如同里面的正则一样,匹配input[name="part"]的value是否是一个数字+3个大写字母 --> <input pattern="[0-9][A-Z]{3}" name="part" /> </label>
当然,不同的
input[type]
也会默认带有相应的pattern
,例如input[type="email"]
就是默认匹配了以下规则:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
第二步:重点功能
input[type="text"]:invalid ~ input[type="submit"], input[type="password"]:invalid ~ input[type="submit"] { display: none; } input[required]:focus:invalid + span { display: inline; } input[required]:empty + span { display: none; } input[required]:invalid:not(:placeholder-shown) + span { display: inline; }
上面便是核心交互的实现。
首先第一个class就是保证了在两个输入框不通过的时候隐藏,就是当输入框值为空或者不符合验证规则,则隐藏提交按钮。
第二个,第三个class则是控制当用户在输入框输入内容时,如果不符合验证规则,则显示错误信息,否则则隐藏。
第四个class则是用过 placeholder 是否存在来控制错误信息的显隐,如果 placeholder 不显示,则证明用户正在输入,错误信息则根据用户输入的值来判断是否显隐,否则则隐藏。
状态切换
上面我们有提到一个选择器
:indeterminate
,这个是用于选择状态不确定的表单元素与<progress>
,玩过扫雷的人都知道,右击除了可以选择红旗,还可以选择问号,就是选中,但不确定;又跟promise
的pending
状态类型,介于resolve
与reject
之间。多了
:indeterminate
会给我们带来很多很有趣的体验。首先我们来看看它的使用案例。
基础使用法
先看效果
代码如下:
<style> body { background: #333; color: #fff; padding: 20px; text-align: center; } input { margin-right: .25em; width: 30px; height: 30px; } label { position: relative; top: 1px; font-size: 30px; } </style> <form> <input type="checkbox" id="checkbox"> <label for="option">点击左边</label> </form> <script> 'use strict'; checkbox.addEventListener('click', ev => { if (ev.target.readOnly) { ev.target.checked = ev.target.readOnly = false; } else if (!ev.target.checked) { ev.target.readOnly = ev.target.indeterminate = true; }; }); </script>
这里面其实没有什么复杂的实现,只是做了个中间态的判断,就非常轻松的实现了radio的三种状态切换。
秀到头皮发麻法
先看效果
(此天秀效果来自于 Ben Szabo 的 codepen,有兴趣的可以仔细研究下,我何时才能有大佬这么优秀,嘤嘤嘤~)
输入框绑定的可选值
先看效果
其实代码很简单:
<input type="text" list="names" multiple /> <datalist id="names"> <option value="kris"> <option value="陈大鱼头"> <option value="深圳金城武"> </datalist> <input type="email" list="emails" multiple /> <datalist id="emails"> <option value="chenjinwen77@foxmail.com" label="kris"> <option value="chenjinwen77@gmail.com" label="kris"> </datalist> <input type="date" list="dates" /> <datalist id="dates"> <option value="2019-09-03"> </datalist>
这里原理就是通过
<input list="dates" />
来绑定需要下拉显示的数据列表<datalist id="dates">
。那么当我们要实现输入联想的时候,也可以通过修改
<datalist id="dates">
的子元素来实现,而不是再写一大堆的操作函数来实现。总结
其实
<input />
标签还有很多有趣的功能是可以挖掘的,不同的类型,结合不同的选择器与属性,是可以有更多让人为之惊叹的体验的。如果你有兴趣的话,不妨多开开脑洞,亲自动手实现一些有趣的功能,或者有什么有趣的想法也可以在下方给鱼头留言或者加鱼头微信 “krisChans95” 来畅谈。如果你喜欢探讨技术,或者对本文有任何的意见或建议,非常欢迎加鱼头微信好友一起探讨,当然,鱼头也非常希望能跟你一起聊生活,聊爱好,谈天说地。
鱼头的微信号是:krisChans95
也可以扫码添加好友,备注“csdn”就行
-
关于input type=“file”的及其files对象的深层探究
2018-05-11 16:57:03我们都知道,html5中有个input type=file元素。用该元素可以实现页面上传文件的功能 ...页面上写一个input,然后选俩个图片,打印这个input对象 $("input[name='file1']").change( function(e){ console.log...我们都知道,html5中有个input type=file元素。用该元素可以实现页面上传文件的功能
但一般的做法只是简单的在表单中操作,我来研究一下深层东西
想要了解它,就要知道它的内置对象,files
页面上写一个input,然后选俩个图片,打印这个input对象
$("input[name='file1']").change( function(e){ console.log($("input[name='file1']")) })
发现有下列值,在0中,有一个files对象
我们发现input选择的文件被记录到了这个对象中,这个是fileList对象,是一个只读对象,不能修改
因为它不能修改,所以很难实现对已选中多个文件的删除某个文件等操作
里面记录了文件的name,size,type,和修改时间等,可知这个对象只存放了一些文件的信息,相当于是本地文件的索引,并不是把文件放到input中了,上传文件时它会再去找到实际的本地文件
fileList数组包含多个File对象,File对象是继承与Blob对象的,关于file,url,blob,dataUrl可以详细查查
一般url可以是本地地址,http地址等
blob对象一般的形式是:blob:http://192.168.100.151:8080/1148dcd6-952e-4478-823d-21b37e537c2f,属于浏览器对象
dataUrl 一直格式是:以data:image/jpeg;base64,这种类似形式打头的一串很长的字符串。
这三种形式在img标签中src属性都可以调用。
File对象有name,size,lastModified属性
File对象的创建:
var file1=new File([blob], "aa.png",{type:"image/jpg"}); //第一个参数是Blob对象或者dataUrl,第二个参数是文件名,三个参数可选,规定文件类型
注意:第一个参数必须是对象,不能是转换成的字符串,比如uniapp或者微信小程序的chooseImage方法返回的blob的url,他是一个字符串,这样生成的File对象只是将url字符串变成文件了,不是文件本身!!!
想把blob字符串变成Blob对象,可以用es6的:const blob = await fetch(image.path).then(r => r.blob())
或者用传统的XHR或者ajax也行,就是把blob对象根据url给获取出来就行。
利用这个files对象,我们可以实现很多功能,例如:
一.选择图片未经后端显示预览图片
方法1:利用window的url工具将文件生成url,再将url赋值给img的src属性,显示出选中图像
顺便提一下,input中控制选中类型加一个accept属性就行了,只会显示设定的文件类型
<input id="file1" type="file" name="file1" multiple="multiple" accept=".doc,.jpg">
$('.fbpj-camera').change(function(event) { //$('.dianpuzhuangxiu .addmokuai .block .shuoming1 .pic .pic1').children().remove(); // 根据这个 <input> 获取文件的 HTML5 js 对象 var files = event.target.files, file; if (files && files.length > 0) { // 获取目前上传的文件 file = files[0]; // 来在控制台看看到底这个对象是什么 console.log(file); // 那么我们可以做一下诸如文件大小校验的动作 if(file.size > 1024 * 1024 * 2) { alert('图片大小不能超过 2MB!'); return false; } // !!!!!! // 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL // 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; // 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); // 用这个 URL 产生一个 <img> 将其显示出来 $('.fbpj .container').prev().find("img").attr('src', imgURL); // 使用下面这句可以在内存中释放对此 url 的伺服,跑了之后那个 URL 就无效了 //URL.revokeObjectURL(imgURL); } });
方法二:利用html5的FileReader()读取文件
*前提是浏览器支持的话
if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not supported by your browser!"); }
<script type="text/javascript"> function showPreview(source) { var file = source.files[0]; if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { document.getElementById("portrait").src = e.target.result; }; fr.readAsDataURL(file); //也是利用将图片作为url读出 } } </script> <input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75">
FileReader还有一些其他用法
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="author" content="oscar999"> <title></title> <script> function handleFiles(files) { if(files.length) { var file = files[0]; var reader = new FileReader(); reader.onload = function() { document.getElementById("filecontent").innerHTML = this.result; }; reader.readAsText(file); //作为字符串读出 //reader.readAsText(file,'gb2312'); //默认是用utf-8格式输出的,想指定输出格式就再添加一个参数,像txt的ANSI格式只能用国标才能显示出来 } } </script> </head> <body> <input type="file" id="file" onchange="handleFiles(this.files)"/> <div id="filecontent"></div> </body> </html>
readAsText一般只能读取txt,html等等文件,局限性较大,比如想要前端读excel文件,由于解决文件编码问题较为复杂,需要用到js-xlsx插件,具体可百度方法。
常用API:
FileReader.readAsDataURL(File) //转换成base64格式
FileReader.readAsText() //转换成字符串格式
FileReader.readAsArrayBuffer(File) //转换成ArrayBuffer格式
FileReader.readAsBinaryString(File) //转换成原始二进制格式(貌似已被废除)
FileReader.onload = function (e) { console.log(e.target.result) } //在上述读取事件完成时触发
二.文件拖拽的方法保存文件
关于文件拖拽下面有注释,我主要说一下怎么给用js给input赋值,而不是手动去选文件
因为拖拽的区域只是一个div,无法进行上传操作,所以需要加一个form和input,让拖拽进去的文件进入input中。
取出files后,用$("#file1")[0].files=files;将文件赋值给input,注意赋值的必须是fileList对象,不要试图只放进去一个文件,fileList只读。
然后用h5中的FormData将form转化,提交即可
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> .container{ width:300px;height: 300px; border:2px dashed #ddd; text-align: center; padding:50px; } </style> <title> 培训活动列表 </title> </head> <body> <div class="container"> 拖拽进入 </div> <form id="form1" method="post" enctype="multipart/form-data"> <input type="file" name="file1" id="file1" value="" /> </form> <script type="text/javascript"> $('.container').bind('dragenter dragover', ignoreDrag); $(".container").on({drop:function(e){ var flag=true; e.preventDefault(); //jquery的file要去e.originalEvent里面拿,拖拽获取files的方式与input的不同 var files = e.originalEvent.dataTransfer.files; //var files = e.dataTransfer.files; 原生的话这样就可以获取 for(var i=0;i<files.length;i++){ myFileReader(files[i],function(result,file){ if(result){ //文件 console.log(file.name) }else{ //文件夹 console.log("不要上传文件夹") flag=false; } }); } if(flag){ $("#file1")[0].files=files; //关键:将取到的文件赋值给input,用于ajax提交文件!!! var formData = new FormData($("#form1")[0]); $.ajax({ url : "/it/orderManage/saveActivity", type : 'POST', data : formData, // 告诉jQuery不要去处理发送的数据 processData : false, // 告诉jQuery不要去设置Content-Type请求头 contentType : false, async : true, success : function(ret) { //alert("上传成功") if(ret){ $("#trainInfoModal").modal("hide"); layer.alert("保存成功") $('#orderTable').bootstrapTable("refresh"); $("#trainInfoModal input").val(""); $("#trainInfoModal textarea").val(""); } } }); } console.log(files); }}) function ignoreDrag(e) {e.originalEvent.stopPropagation(); e.originalEvent.preventDefault(); } function myFileReader(file, callback){ if(!window.FileReader){ callback(true,file); return false; } var fr = new FileReader(); fr.readAsDataURL(file); fr.onload=function(e){ callback(true,file); } fr.onerror=function(e){ //不好判断是否是文件夹,通过上传报错可以判断是文件夹 callback(false,file); } return true; }; </script> </body> </html>
后台获取文件还是用MutipartFile[]接收
public String saveActivity(@RequestParam HashMap<String, String> param, //@RequestParam(value = "banner") MultipartFile[] files, @RequestParam(value = "file1") MultipartFile[] file1, HttpServletRequest request, String fileNames, String TID, HttpServletRequest req) {
三.vue+axios 上传文件无论ajax还是axios,都不是直接用表单提交的,都是 要用 new FormData()转化一下。
所以axios方法与ajax方法类似
<input type="file" class="inputBtn" @change="uploadMarketingForm">
uploadMarketingForm(e){ console.log(e) var fileName=e.target.files[0].name; //文件名 var fileSize=e.target.files[0].size; //文件大小 var param = new FormData(); //添加表单参数,如果后台用文件数组接收 //param.append("file", e.target.files); //如果后台只接收单一文件 param.append("file", e.target.files[0]); //设置表头类型 const config = { headers: { "Content-Type": "multipart/form-data" } }; this.axios.post("/.../uploadTest", param, config).then(res => { console.log(res); }); },
在java spring mvc中还是这么接收
@ResponseBody @RequestMapping(value = "uploadTest", produces = "text/plain;charset=UTF-8") public String uploadTest(@RequestParam Map<String,String> param,@RequestParam(value = "file") MultipartFile[] file1, HttpServletRequest request) throws IOException { RetBase retBase = new RetBase(); //文件可以在参数中用MultipartFile[](多文件) 或者 MultipartFile (单一文件)接收 //也可以像这样在request中接收 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; MultipartFile multifile = multipartRequest.getFile("file"); // 通过参数名获取指定文件 String fileName = multifile.getOriginalFilename(); // 获取文件后缀 String prefix=fileName.substring(fileName.lastIndexOf(".")); // 用uuid作为文件名,防止生成的临时文件重复 final File file = File.createTempFile(UUID.randomUUID().toString(), prefix); // MultipartFile to File return JSON.toJSONString(retBase, SerializerFeature.WriteMapNullValue); }
-
element input输入框自动获取焦点
2019-10-25 14:25:40最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦...document.getElementById("input").focus(); 或者利用vue的ref属性也可以实现聚焦效果: 原理其实很简单,Element 已经提供了 focus...博客地址:http://www.globm.top/blog/1/detail/43
最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态。但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了
document.getElementById("input").focus();
或者利用vue的ref属性也可以实现聚焦效果:
原理其实很简单,Element 已经提供了 focus 方法,但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性,然后在需要的地方直接调用方法就可以了
<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>
this.$nextTick(() => { this.$refs.input.focus() })
注意:一个页面只能有一个聚焦效果
last , vue也支持自定义指令
当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() // element-ui el.children[0].focus() // 元素有变化,如show或者父元素变化可以加延时或判断 setTimeout(_ => { el.children[0].focus() }) } })
参考:vue自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
-
使用jquery如何清空input 中的内容
2017-05-28 19:58:29用JQ的attr属性就可以清空input的内容 <inputtype="text"value="TEST"/> <scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"type="text/javascript"/> <script> $(function(){ ... -
去除input边框和去除当点击input框时显示的边框
2017-06-08 11:36:00去掉input框的边框以及当点击时显示的边框 解决方法:http://www.yayihouse.com/yayishuwu/chapter/1407 -
如何在HTML中限制input 输入框只能输入纯数字
2018-02-27 15:23:29在输入框输入任何非数字内容,都会自动退格并清除! 核心代码: onKeyUp=”value=value.replace(/[^\d]/g,”)” 示例代码 &lt;!DOCTYPE html&gt; &lt;html lang=&...U -
vue三种常用获取input值写法
2019-03-20 15:02:381. v-model 表单输入绑定 使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊...input class="login-input" type="text" v-model="username" placeholder="请输入账... -
修改input输入框的样式
2016-08-08 10:51:02我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢? 下面我们来写个简单的表单 <form action="" method="get"> <div class="input_... -
linux 中的 nohup 命令(设置后台进程): nohup: ignoring input and appending output to ‘nohup.out’
2018-08-07 10:15:31一、Linux 下使用 nohup Unix/Linux下一般比如想让某个程序在后台运行,很多都是使用 & 在程序结尾来让程序自动运行。 比如我们要运行weblogic在后台: ./startWebLogic.sh &... -
input和raw_input的区别
2019-05-07 22:47:30首先明确一点,input()与raw_input()的区别只存在Python2.X环境下,因为在Python3中将Python2中的input()删除了,同时将raw_input()改名为input()。 如果你主要使用Py3,那么你只需关注在使用input()时所输入的数据... -
python中input()和raw_input的区别
2017-12-17 10:47:59Python 版本 2.x 中,raw_input() 会从标准输入(sys.stdin)读取一个输入并返回一个字符串,且尾部的换行符从末尾移除二、区别注意:使用python2.x版本进行相应的练习raw_input()随便输都是字符串,而input()必须... -
react 获取input 输入框的值
2018-08-03 11:11:27react 获取input 输入框的值 第一种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Component} from 'react'; export default class App extends Component{ search(){ ... -
HTML-input文本框(添加提示文字,填写内容时消失)
2018-01-26 15:00:36input文本框内添加提示文字,填写内容时消失: 用placeholder属性作为提示语 <input placeholder="提示语..."></input> -
React自定义input样式以及实现上传照片功能
2019-07-14 11:21:45今天给大家带来React自定义input的样式,以及保留input的功能 React实现: 实现原理: 给input加ref,然后在你自定义样式的标签上面加点击事件,触发input的点击事件。 或者用label,都可以的。 如果用label实现请看... -
input内容变动简单粗暴
2019-06-13 14:29:01转载:https://www.jianshu.com/p/f6c0d879cbaf $(function(){ //输入框的值改变时触发 $("#inputid").on("input",function(e){ //获取input输入的值 console.log(e.delegateTarget.value); }); }); ... -
filter_input filter_input_array php筛选器 php过滤器
2020-10-12 13:04:57filter_input 获取一个输入变量,并对它进行过滤 filter_input_array 获取多个输入变量,并通过相同的或不同的过滤器对它们进行过滤 语法 filter_input ( int $type , string $variable_name [, int $filter = ... -
input 事件
2018-12-24 11:42:33input 事件 1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js 3.onchange 当input失去焦点并且它的value值发生变化时... -
js实现input的赋值
2018-03-10 17:36:20input框赋值 如下所示,是一个文本框的html代码,实际开发中,要涉及到将数据库中的数据取出然后放入input框中。 <input id="name1" name="teacherName" type="text" /&... -
去除input边框
2017-05-12 18:34:37去除input的边框 去除input获取焦点时的蓝色外边框** 去除input的边框仅仅用border属性 ,其实是不能满足我们的需求的 此外还需要加上outline属性才可以 实现我们想要的样式 ** 去除边框的代码 border-width:0; ... -
input输入框禁止显示历史记录
2018-10-24 15:15:39在输入input时会显示原来输入的内容,禁止这种情况只需在input中加入: autocomplete=“off” &amp;lt;input type=&quot;text&quot; autocomplete=&quot;off&quot; /&... -
uniapp input
2019-04-23 14:56:11uni-app 密码框 <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input> displayable 属性 -
layui分页遇到的问题及button和input的区别
2020-02-08 20:59:44layui分页成功,但点击页数时,列表数据正确,但是页数还是显示到第一页 ... 参考文献 ...button和input的区别 button能导致整个页面重新刷新,而input不会 参考文献 https://blog.csdn.net/qq_40113688... -
input函数
2018-11-03 11:50:57input 函数实现键盘的输入,可以使用 input 函数从键盘等待用户的输入,用户输入的任何,内容 python 都认为是一个字符串 所谓输入,就是用代码获取用户通过键盘输入的信息 比如你希望得到用户输入的信息 ... -
使input文本框不可编辑的3种方法
2017-11-20 13:03:42今天试了一下使input文本框不可编辑的3种方法,现在总结一下: disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字... -
input元素的oninput事件和onchange事件
2019-03-20 23:43:47input元素的oninput事件和onchange事件 1、input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用 <input type="text" id="input" oninput="handleInput()">... -
input各种事件
2019-05-05 17:14:041.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。 3.onchange 当input失去焦点并且它的value... -
Python:raw_input 和 input用法
2019-05-21 17:39:21使用input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的 纯数字输入,当输入为纯数字时 input返回的是数值类型,如int,float raw_inpout返回的是字符串类型,string类型 输入...
-
字符串补充与运算符
-
个人信息提交表单网页模板
-
Java的String进行比较时(==和.equals)
-
【数据分析-随到随学】Mysql数据库
-
银灰网络科技产品网页模板
-
数据分析图表响应式网页模板
-
转行做IT-第2章 HTML入门及高级应用
-
算法导论(基础知识)——编程大牛的必经之路
-
复古图书馆登录注册表单网页模板
-
Kubernetes 入门到进阶实战
-
zjs-my-diary-20210122
-
【计算机网络系列】链路层的差错控制与流量控制
-
dart菜鸟笔记
-
three.js入门速成
-
旅行新发现手机网页模板
-
Linux与数据库基础
-
【数据分析-随到随学】互联网行业业务指标及行业数
-
滑板运动介绍销售响应式网页模板
-
黑色扁平UIKIT部件响应式网页模板
-
易语言开发通达信DLL公式接口