input textarea 禁止输入 非数字,特别是中文字符,光标位置保持不变 - vue2
input textarea 禁止输入 非数字,特别是中文字符,光标位置保持不变
思路:禁止输入 主要是用 keydown事件限制 不让输入即可,主要是输入中文的时候,之前没弄过。
禁止中文输入思路
由于input禁止不了中文的输入,所以改为watch value解决
- 在 onKeyDownHandle 记录下 输入时候的光标位置 ssOld(selectionStart Old)
- watch value的时候,看下是否是非法字符,如果是非法字符,就setSelectionRange 之前的光标位置 ssOld
完美解决。
<Input v-model="innerValue"
:disabled="disabled"
v-show="!divShow"
class="nianyueInput2Class"
:class="classes"
ref="nianyueInput2Ref"
type="textarea"
:maxlength="8"
@on-blur="inputOnBlurHandle"
@on-keydown.tab="onkeydownTabHandle"
@on-keydown="onKeyDownHandle"
placeholder=""
style="width: 100%; height: 52px;" />
watch: {
value (val) {
this.innerValue = val
this.$nextTick(() => {
this.innerValue = clearSpot(val)
this.$nextTick(() => {
if (clearSpot(val) !== val) { // 有非法字符的时候 恢复光标
this.$refs.nianyueInput2Ref.$refs.textarea.setSelectionRange(this.ssOld, this.ssOld)
}
})
console.info('this.innerValue -- ', this.innerValue)
})
},
innerValue (val) {
console.info('watch NianyueInput2 innerValue', val)
this.$emit('input', val)
}
},
onKeyDownHandle (event) {
this.ssOld = this.$refs.nianyueInput2Ref.$refs.textarea.selectionStart
console.info('this.ssOld', this.ssOld)
onKeyDownHandle(event)
},
其他函数
export const clearSpot = dateStr => {
// return dateStr.replace(/[&\|\\\*^%$#@\-.]/g, '')
return dateStr.replace(/[^0-9]/ig, "")
}
export const onKeyDownHandle = (event) => {
// 只允许输入纯数字
console.info('onKeyDownHandle event.keyCode', event.keyCode)
// const allowedCharacters
const k = event.keyCode
if ((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k === 8 || k === 46 || k === 9 || k === 37 || k === 39) {
// 允许输入
} else {
event.returnValue = false
}
}
input textarea 禁止输入 非数字,特别是中文字符,光标位置保持不变 - vue2的更多相关文章
- 控制input框输入非数字
<input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">
- 【JS】数字转大写中文
原文参考 逛到一道面试题,数字转大写中文的,搜索学习并记录于此. //自动转换数字金额为大小写中文字符,返回大小写中文字符串,最大处理到999兆 function changeMoneyToChine ...
- textarea在光标位置插入文字
最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...
- input框只能输入整数和浮点数非数字就不输入
<input type="text" onInput="clearNoNum(this)" > //需引入jquery <script> ...
- input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格
以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...
- PHP字母数字验证码和中文验证码
1:字母数字组合的验证码 HTML代码: 验证码:<input type="text" name="code"> <img onclick=& ...
- 【JS】input输入框只能输入数字
一.实现思路 input只能输入纯数字的思路其实很简单,监听输入框值的变化,每次输入检索输入框的值,将非数字的字段替换成空,再将此值赋予给输入框. 关键代码: \d:匹配数字 ^/d:全文匹配非数字 ...
- 设置输入域(input/textarea)中文本光标的位置
以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...
- 实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)
document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...
- PHP 向 MySql 中数据修改操作时,只对数字操作有效,非数字操作无效,怎么办?
问题描述: 用PHP向MySql数据库中修改数据,实现增删改(数据库能正确连接) 经测试,代码只能对数字进行正常的增删改操作,非数字操作无效 但要在课程名称中输入中文,应该如果修改呢? 存 ...
随机推荐
- 强化学习技巧三:Python多进程
1.Python多进程模块 Python中的多进程是通过multiprocessing包来实现的,和多线程的threading.Thread差不多,它可以利用multiprocessing.Proce ...
- 监控Celery不一定非要使用Flower
运维平台中有许多的周期/定时/异步任务,例如证书扫描.数据备份.日志清理.线上作业等等,这些任务的执行都是借助于Celery来完成的.任务多了之后就会遇到一系列的问题,例如我之前写过的将任务分多队列来 ...
- ROS节点通信(三)action
官方wiki:http://wiki.ros.org/actionlib 目录 1.说明 2.代码示例 2.1.定义数据结构 2.1.1.goal 2.1.4.result 2.1.3.feedbac ...
- python截取字符串(字符串切片)
python中使用[]来截取字符串,语法: 字符串[起始位置:结束位置] 一.起始位置:结束位置 先看几个例子: s = 'python' print(s) #输出 python 直接输出字符串 #从 ...
- 如何使用 etcd 实现分布式 /etc 目录
etcd 是一款兼具一致性和高可用性的键值数据库,简单.安全.快速.可信,目前是 Kubernetes 的首要数据存储.我们先来看一段 etcd 官方对于名字的解释. The name "e ...
- DBSAT脚本快速收集方法
DBSAT是Oracle官方提供的脚本,用于数据库的安全评估检查,用户可以放心下载使用. 下载链接具体参见MOS: Oracle Database Security Assessment Tool ( ...
- Cnpack ctrl+alt+v 来回切换 变量声明区,和代码写区,非常方便
Cnpack ctrl+alt+v 来回切换 变量声明区,和代码写区,非常方便 非常方便
- python实现百度贴吧页面爬取
import requests class TiebaSpider: """百度贴吧爬虫类""" def __init__(self, ti ...
- NC20189 [JSOI2011]分特产
题目链接 题目 题目描述 JYY 带队参加了若干场ACM/ICPC 比赛,带回了许多土特产,要分给实验室的同学们. JYY 想知道,把这些特产分给N 个同学,一共有多少种不同的分法? 当然,JYY 不 ...
- NC24416 [USACO 2013 Nov G]No Change
题目链接 题目 题目描述 Farmer John is at the market to purchase supplies for his farm. He has in his pocket K ...