一、vue 限制输入num之-：
前言：
vant 的组件type=number 在ios输入掉起数字键盘，没有小数点，满足不了移动端输入小数的情况，所以唯有使用type="text"这种方式，然后限制输入数字，同时可以输入负数、小数（最长输入length限制、保留两位小数限制）
- 解决方式如下：
// input type=text 唤起全键盘
// 规则设定：支持输入小数、负数、正整数 其他值不予选定
function trimExtraChar (value, char, regExp) {
const index = value.indexOf(char)
if (index === -1) {
return value
}
if (char === '-' && index !== 0) {
return value.slice(0, index)
}
return value.slice(0, index + 1) + value.slice(index).replace(regExp, '')
}
export function formatNumber (
value,
allowDot = true,
allowMinus = true
) {
if (allowDot) {
value = trimExtraChar(value, '.', /\./g)
} else {
value = value.split('.')[0]
}
if (allowMinus) {
value = trimExtraChar(value, '-', /-/g)
} else {
value = value.replace(/-/, '')
}
const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g
return value.replace(regExp, '')
}
- 调用示例：
<van-field v-model="changeValue" type="text"
@input="changNumber"
ref="inputBtn"
:autofocus="true"
placeholder="Enter your answer" />
changNumber (value) {
if (value === '') {
return
}
if (value.length > 10) { //最长10位,如不需要，可注释
value = value.slice(0, 10)
}
if(!/\./.test(value) { // 如果输入是0001 or 000, 转换成1 or 0 ，如不需要，可注释
value= +value //
}else{ // 限制输入保留两位小数 ，如不需要，可注释
value = value.replace(^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
}
const inputValue = formatNumber(value, true, true)
this.changeValue = inputValue
}
二、vue 限制输入num之二：（同时可以解决火狐浏览器type=number可以输入英文的情况）
- type=num是无法限制
e + -的输入的 - 原因:在数学中，e是极为常用的超越数之一 它通常用作自然对数的底数，即：In(x)=以e为底x的对数。e=2.71828
- 如果想要屏蔽，可是如下使用：
<el-input
v-model="value"
type="number"
placeholder="Please enter a number"
onkeyup="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
@input="chnageValue">
</el-input>
三、vue 限制输入只能输入正整数
<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
四、vue element-ui 表单页面,有多个表单输入时，enter触发表单关闭提交事件：
原因：触发了表单默认提交事件
- 解决办法：(阻止表单默认提交事件)
<el-form @submit.native.prevent></el-form>
五、移动端(fixed、absolute)定位导致 input输入框被Android浏览器软键盘遮挡的问题处理
- 解决办法-：
监听window的resize事件，进行相应的高度或位置调整:
var winHeight = $(window).height();
$(window).resize(function() {
var thisHeight = $(this).height();
if (winHeight - thisHeight > 50) {
//软键盘弹出
$('body').css('height', winHeight + 'px');
} else {
$('body').css('height', '100%');
}
});
- 解决办法二：
监听input输入框获得焦点和失去焦点的事件，进行相应地处理
function fixIMEOf(nodeId, topOrg, topNew) {
var node = document.getElementById(nodeId);
if(node!=null) {
node.addEventListener('focusin', function() {
if(!Q.isIOS()) {//iOS上一般不会有这个问题
//将input的父容器往上移动，移出遮挡区
node.parentNode.style.top = topNew + 'px';
}
});
node.addEventListener('focusout', function() {
window.scrollTo(0,0);//解决iOS上，关闭软键盘后，页面可能不下移，造成页面底部留白的问题
if(!Q.isIOS()) {
node.parentNode.style.top = topOrg + 'px';
}
});
}
}
五、邮箱验证正则
regConfig = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
