当前位置: 代码迷 >> 综合 >> el-input的onkeyup解决报错Uncaught ReferenceError: xx is not defined at HTMLInputElement.onkeyup
  详细解决方案

el-input的onkeyup解决报错Uncaught ReferenceError: xx is not defined at HTMLInputElement.onkeyup

热度:56   发布时间:2023-12-26 21:22:34.0

需求:在输入框输入时校验输入字符,中英文时校验方式不同

(languageStatus == 0)中文情况下只能输中文汉字

(languageStatus == 1)英文情况下只能输英文字母,短横线,单引号和空格

初始实现:

众所周知,没有条件判断的时候可以直接用

<!-- 只能输入汉字 -->
<el-input v-model="value"onkeyup="value = value.replace(/[^\u4e00-\u9fa5]/g, '')"></el-input>

那么如果存在条件判断该怎么做呢?

我的第一反应是这样:

<!-- 
languageStatus为0时是中文,只能输汉字
languageStatus为1时是英文,只能输英文字母,短横线,空格和单引号-->
<el-input v-model="value":onkeyup="value = languageStatus? value.replace(/[^a-zA-Z\-\s\']/g, ''): value.replace(/[^\u4e00-\u9fa5]/g, '')"></el-input>

给属性前加上冒号(:),后面改成表达式,齐活~不得不说我也太机智了hhh

结果运行后发现,中英文规则校验倒是管用了

但是一输入就报错:

问题出在哪呢? 

在网上苦苦寻觅这个错误都找不到答案

有一篇帖子类似问题底下说改成方法试试?

但是如果传入的是个方法去调用的话,就不能实时的校验输入内容了

然后经过我一遍遍反复试探,终于功夫不负有心人

解决办法:

<el-input v-model="value":onkeyup="(function () {value = languageStatus? value.replace(/[^a-zA-Z\-\s\']/g, ''): value.replace(/[^\u4e00-\u9fa5]/g, '')})()"></el-input>

改成立即执行函数就可以啦~

特此纪录!


 原创不易,转载务必注明出处。

  相关解决方案