关于input兼容性的总结

2018-01-27 10:27:48来源:网络收集作者:咖啡不加糖人点击

分享

一月快要结束了 O(∩_∩)O~


input失去焦点的时候,如何取得input框的值

需求描述:有这样一个表格(表格组件),表格中有几列中是包含input这个输入框的,之前使用的是v-model,现在需要添加一些校验,我想到的就是在input输入框失去焦点的时候,用个函数去处理,这个函数的形参包括,该行所在的下标,input框中的内容,那下面的问题就是关于如何得到input框内的内容


关于如何得到input框内的内容

首先传入this.value这个可是行不通的哦,为undefined,下面说得到value值得方式吧


1.传入$event,在处理函数中通过ev.target.value得到input中的值



checkValue(rowIndex, ev) {
// ev.target.value
}

2.利用ref,在处理函数中通过this.$refs.ref.value得到input的值



checkValue(rowIndex, ev) {
// this.$refs.input.value
}

3.watch方式,但是不建议用在表格这些,单独的一个input框这个还是可以的


watch: {
value:function(newVal, oldVal){
// todo
}
}

可以看看别人的讨论: https://segmentfault.com/q/1010000008008824


从组件的使用问题找到特定日期的一些方法

需求描述:有个可以select可以选择不同的时间查找标准,比如,”按日查找“,”按月查找“,”按年查找“,然后选择不同的option需要切换到不同的日期组件(有起始日期、结束日期),之前预计的打算是对于不同的日期组件,给出不可选的时间范围,但是之间存在相互制约的问题,尝试了之后发现是有一些问题的,特别是对于单月和单年组件,因此转换了思路,对于两个单月组件给出了一个不可选的配置对象,对于两个单年组件给出了一个不可选的配置对象(这个是简陋的,给出的只是粗粒度的可选范围,例如不再在开始日期选择之后,结束日期的不可选约束会变化,同理可得其他),关于日期的效验是加在其他的事件上的,这里就不详细说明了


下面的东西只适合我使用的组件,你可以选择忽略


options: {
//2014-08-31及之前月份不可选择
disabelStartDay: "2014-08-31",
// disabelEndDay 为当前月的最后一天
// 当前月的最后一天 之后的月份不可选
disabelEndDay: "2018-01-31"
}
options3: {
//2013-12-31及之前年份不可选择
disabelStartDay: "2013-12-31",
// disabelEndDay 为当前年的最后一月
// 当前年的最后一天 之后的年份不可选
disabelEndDay: "2018-12-31"
}

有两个地方需要得到,当前月的最后一天,当前年的最后一天


相比较而言,当前年的最后一天是比较好得到的,如下


new Date().getFullYear() + '-12-31'

当前月的最后一天代码如下:


let year = new Date().getFullYear();
let month = new Date().getMonth() + 1;
let day = new Date(year, month, 0);
let lastDate = year + '-' + month + '-' + day.getDate();
input的type=number的一些兼容性解决方案

想要限制用户的输入为number类型的,所以使用了type="number"



就这样一个单纯的input,在不同的浏览器中展示出来的效果就是不一样的


下面的就是Chrome中看到的效果:在不做任何操作的时候和普通的input框没有两样,但是一旦获得焦点,它也会出现像下面的图的上下箭头


关于input兼容性的总结


下面的Firefox中的效果,在不做任何处理的时候都是下面的样子(操作也是这个样子的),而且当数值为小数的时候,它的周围就会出现红色的框


关于input兼容性的总结


下面说下解决兼容性的方法:


样式方面,增加下面的CSS样式


/*针对的是Chrome*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
/*针对的是Firefox*/
input[type="number"]{-moz-appearance:textfield;}

关于不能输入小数



这个是允许输入1位小数的情况,当需要多为小数的时候,只需要更改step(默认的步长是1,用step把它设置成比如0.1)的值


希望对你有用,希望自己继续加油 ^_^



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台