首页 » CSS » 关于input兼容性的总结

关于input兼容性的总结

原文 http://blog.csdn.net/Dear_Mr/article/details/79175260

2018-01-27 02:00:08阅读(545)

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

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

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

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

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

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

<input v-bind:value="val" @blur="checkValue(rowIndex, $event)"/>
checkValue(rowIndex, ev) {
    // ev.target.value
}

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

<input type="text" ref="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 type="number" min="1" max="100" />

就这样一个单纯的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;}

关于不能输入小数

<input type="number" max="100" min="0" step="0.1">

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

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

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹