草庐IT

【input】输入框事件总结

aristo_boyunv 2023-04-12 原文

input标签事件总结

最近在维护MES相关的系统,好家伙,接手就来个BUG,前端的关于input输入框的输入内容的输入内容事件失效的问题,

正好进行学习并汇总

一、在Html中input输入框相关事件写法：

常用的事件总结

事件功能
onfocus（常用）input标签获取焦点事件
onblur（常用）input失去焦点事件（触发条件：先获取焦点，再失去焦点触发）
onchangeinput失去焦点并且它的value值发生变化时触发
oninputinput框输入过程中value值改变时实时触发，换句话说就是 每输入一个字符都会触发
onclickinput标签type="button"时的点击事件
onkeydowninput框输入时键盘按钮按下事件
onkeyupinput框输入时键盘按钮抬起事件，触发onkeyup事件之前一定触发onkeydown事件
onselectinput标签内容选中时触发事件

JavaScript语法：

JS绑定事件写法：

document.getElementByTagName(‘input’).onfocus = function();

$("#XXX").onchange(){  }

二、vue中监听input标签事件

vue中监听iinput标签事件的写法与H5+js的写法有些不同。

input实时监听事件

实时监听事件为v-on:input方法

//比如回车
<input @keyup.enter="xxx()">
    
    
---一般的
<!--HTML页面方法-->
<input type="text" v-model.trim="inputVal" @input="resetinputVal" />

<!--js方法 -->   
let regRule = /[\u4e00-\u9fa5]|[<>&'"\\]/g;
data: {
	inputVal: '',
},
methods: {
	// 重置号码
	resetinputVal(e) {
		let val = e.target.value
		let value = val.replace(regRule, '')
		this.inputVal = value
		this.$forceUpdate()
	},
}

//实时监听input值的变化，停⽌输⼊300ms后去请求，⽽不是时时请求数据(可以不看,自己学习博客记录)

data: {
	timeout: null,
},
watch: {
    inputVal(curVal, oldVal) {
        // 实现input连续输⼊，只发⼀次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.getAPI(curVal);
        }, 300);
    }
},
methods: {
	// 请求接口
	getAPI(curVal) {},
}

//input获取焦点事件：
<input type=“text” placeholder=“请输入” @blur=“xxx()”>

//input失去焦点事件：
<input type=“text” placeholder=“请输入” @focus=“xxx()”>

//限制小数位

<input type="number" @keydown="keydownFn" v-model="inputVal">

//Vue 限制input输入 小数点后两位number
    keydownFn(event) {
    // 通过正则过滤小数点后两位
    // event.target.value = (event.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null    //只能为正数
       event.target.value = (event.target.value.match(/\-?\d+\.?\d{0,1}/g)[0]) || null       //可以为负数
    
},
/Vue 限制input输入 小数点后一位number
    keydownFn(event){
    const arr = event.target.value.split('.');
    if(arr.length == 2 && arr[1].length > 1){       //有至少两位小数
        event.target.value = arr[0] + '.' + arr[1].substr(0,1);
        this.$message({
            message: '只允许一位小数',
            type: 'warning'
        });
     }else if(arr.length == 1){      //没有小数
        event.target.value = arr[0]
     }else if(arr.length == 2 && arr[1].length == 1){        //只有一位小数
        event.target.value = arr[0] + '.' + arr[1];
     }
},
input输入spanclasstoken前端javascriptvue.js

有关【input】输入框事件总结的更多相关文章

  1. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  2. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  5. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  6. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  7. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  8. ruby - ruby 中的同一个程序如何接受来自用户的输入以及命令行参数 - 2

    我的ruby​​脚本从命令行参数获取某些输入。它检查是否缺少任何命令行参数，然后提示用户输入。但是我无法使用gets从用户那里获得输入。示例代码:test.rbname=""ARGV.eachdo|a|ifa.include?('-n')name=aputs"Argument:#{a}"endendifname==""puts"entername:"name=getsputsnameend运行脚本:rubytest.rbraghav-k错误结果:test.rb:6:in`gets':Nosuchfileordirectory-raghav-k(Errno::ENOENT)fromtes

  9. ruby-on-rails - 为什么用户必须输入 7 位数的 Twitter PIN 才能授予我的应用程序访问权限？ - 2

    我正在为我的用户实现一些ruby​​onrails代码推特内容。我正在创建正确的oauth链接...类似http://twitter.com/oauth/authorize?oauth_token=y2RkuftYAEkbEuIF7zKMuzWN30O2XxM8U9j0egtzKv但在我的测试帐户授予对twitter的访问权限后，它会弹出一个页面，上面写着“您已成功授予对.我不知道用户应该在哪里输入此PIN以及他们为什么必须这样做。我认为这不是必要的步骤。Twitter应该将用户重定向到我在应用程序设置中提供的回调URL。有谁知道为什么会这样？更新我找到了thisarticle声明我需

  10. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系，城市又属于一个州，例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子，但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型，我们在StackOverflow上找到一个类似的问

随机推荐