input textarea 禁止输入 非数字,特别是中文字符,光标位置保持不变

思路:禁止输入 主要是用 keydown事件限制 不让输入即可,主要是输入中文的时候,之前没弄过。

禁止中文输入思路

由于input禁止不了中文的输入,所以改为watch value解决

  1. 在 onKeyDownHandle 记录下 输入时候的光标位置 ssOld(selectionStart Old)
  2. watch value的时候,看下是否是非法字符,如果是非法字符,就setSelectionRange 之前的光标位置 ssOld

完美解决。

  1. <Input v-model="innerValue"
  2. :disabled="disabled"
  3. v-show="!divShow"
  4. class="nianyueInput2Class"
  5. :class="classes"
  6. ref="nianyueInput2Ref"
  7. type="textarea"
  8. :maxlength="8"
  9. @on-blur="inputOnBlurHandle"
  10. @on-keydown.tab="onkeydownTabHandle"
  11. @on-keydown="onKeyDownHandle"
  12. placeholder=""
  13. style="width: 100%; height: 52px;" />
  1. watch: {
  2. value (val) {
  3. this.innerValue = val
  4. this.$nextTick(() => {
  5. this.innerValue = clearSpot(val)
  6. this.$nextTick(() => {
  7. if (clearSpot(val) !== val) { // 有非法字符的时候 恢复光标
  8. this.$refs.nianyueInput2Ref.$refs.textarea.setSelectionRange(this.ssOld, this.ssOld)
  9. }
  10. })
  11. console.info('this.innerValue -- ', this.innerValue)
  12. })
  13. },
  14. innerValue (val) {
  15. console.info('watch NianyueInput2 innerValue', val)
  16. this.$emit('input', val)
  17. }
  18. },
  1. onKeyDownHandle (event) {
  2. this.ssOld = this.$refs.nianyueInput2Ref.$refs.textarea.selectionStart
  3. console.info('this.ssOld', this.ssOld)
  4. onKeyDownHandle(event)
  5. },

其他函数

  1. export const clearSpot = dateStr => {
  2. // return dateStr.replace(/[&\|\\\*^%$#@\-.]/g, '')
  3. return dateStr.replace(/[^0-9]/ig, "")
  4. }
  5. export const onKeyDownHandle = (event) => {
  6. // 只允许输入纯数字
  7. console.info('onKeyDownHandle event.keyCode', event.keyCode)
  8. // const allowedCharacters
  9. const k = event.keyCode
  10. if ((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k === 8 || k === 46 || k === 9 || k === 37 || k === 39) {
  11. // 允许输入
  12. } else {
  13. event.returnValue = false
  14. }
  15. }

input textarea 禁止输入 非数字,特别是中文字符,光标位置保持不变 - vue2的更多相关文章

  1. 控制input框输入非数字

    <input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">

  2. 【JS】数字转大写中文

    原文参考 逛到一道面试题,数字转大写中文的,搜索学习并记录于此. //自动转换数字金额为大小写中文字符,返回大小写中文字符串,最大处理到999兆 function changeMoneyToChine ...

  3. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  4. input框只能输入整数和浮点数非数字就不输入

    <input type="text" onInput="clearNoNum(this)" > //需引入jquery <script> ...

  5. input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格

    以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...

  6. PHP字母数字验证码和中文验证码

    1:字母数字组合的验证码 HTML代码: 验证码:<input type="text" name="code"> <img onclick=& ...

  7. 【JS】input输入框只能输入数字

    一.实现思路 input只能输入纯数字的思路其实很简单,监听输入框值的变化,每次输入检索输入框的值,将非数字的字段替换成空,再将此值赋予给输入框. 关键代码: \d:匹配数字 ^/d:全文匹配非数字 ...

  8. 设置输入域(input/textarea)中文本光标的位置

    以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...

  9. 实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

    document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...

  10. PHP 向 MySql 中数据修改操作时,只对数字操作有效,非数字操作无效,怎么办?

    问题描述:   用PHP向MySql数据库中修改数据,实现增删改(数据库能正确连接) 经测试,代码只能对数字进行正常的增删改操作,非数字操作无效   但要在课程名称中输入中文,应该如果修改呢?   存 ...

随机推荐

  1. 强化学习技巧三:Python多进程

    1.Python多进程模块 Python中的多进程是通过multiprocessing包来实现的,和多线程的threading.Thread差不多,它可以利用multiprocessing.Proce ...

  2. 监控Celery不一定非要使用Flower

    运维平台中有许多的周期/定时/异步任务,例如证书扫描.数据备份.日志清理.线上作业等等,这些任务的执行都是借助于Celery来完成的.任务多了之后就会遇到一系列的问题,例如我之前写过的将任务分多队列来 ...

  3. ROS节点通信(三)action

    官方wiki:http://wiki.ros.org/actionlib 目录 1.说明 2.代码示例 2.1.定义数据结构 2.1.1.goal 2.1.4.result 2.1.3.feedbac ...

  4. python截取字符串(字符串切片)

    python中使用[]来截取字符串,语法: 字符串[起始位置:结束位置] 一.起始位置:结束位置 先看几个例子: s = 'python' print(s) #输出 python 直接输出字符串 #从 ...

  5. 如何使用 etcd 实现分布式 /etc 目录

    etcd 是一款兼具一致性和高可用性的键值数据库,简单.安全.快速.可信,目前是 Kubernetes 的首要数据存储.我们先来看一段 etcd 官方对于名字的解释. The name "e ...

  6. DBSAT脚本快速收集方法

    DBSAT是Oracle官方提供的脚本,用于数据库的安全评估检查,用户可以放心下载使用. 下载链接具体参见MOS: Oracle Database Security Assessment Tool ( ...

  7. Cnpack ctrl+alt+v 来回切换 变量声明区,和代码写区,非常方便

    Cnpack ctrl+alt+v 来回切换 变量声明区,和代码写区,非常方便 非常方便

  8. python实现百度贴吧页面爬取

    import requests class TiebaSpider: """百度贴吧爬虫类""" def __init__(self, ti ...

  9. NC20189 [JSOI2011]分特产

    题目链接 题目 题目描述 JYY 带队参加了若干场ACM/ICPC 比赛,带回了许多土特产,要分给实验室的同学们. JYY 想知道,把这些特产分给N 个同学,一共有多少种不同的分法? 当然,JYY 不 ...

  10. 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 ...