DOM3 textInput事件-softbar

vue.js中v-on:textInput无法执行事件问题的解决过程 前言 最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍: 先来看这段示例代码 <div id=wrap> <input type=text v-on:textInput=fn> </div> [removed][removed] [removed] new Vue({ el:&#39;#wrap&#39;, methods:{ 立即下载

DOM3中引入了文本事件,其中之一 textInput 。

 

当用户再可编辑区域输入字符时触发该事件。

 

与keypress不同的是,该事件只会在用户输入可视字符时触发,而keypres事件则只要按下键即触发(如CapsLock,Backspace)。

 

可看到textInput考虑的主要是字符,可以通过事件对象的data属性获取所输入字符。softbar

http://www.softbar.com/ 

 

示例

01

<!DOCTYPE HTML>

02

<html>

03

<head>

04

<title>DOM3 event textInput</title>

05

</head>

06

<body>

07

 

08

<input id="ipt" type="text" />

09

<script type="text/javascript">

10

    function addEvent(el,type,fn){

11

        if(el.addEventListener){

12

            el.addEventListener(type, fn, false);

13

        }else{

14

            el.attachEvent('on' + type, fn);

15

        }      

16

    }

17

    var ipt = document.getElementById('ipt');

18

    addEvent(ipt,'textInput',function(e){

19

        e = e || window.event;

20

        console.log(e.data);

21

    });

22

</script>

23

 

24

</body>

25

</html>

 

目前只有IE9,Chrome,Safari支持。

DOM3中的js textInput文本事件 DOM3中引入了文本事件,其中之一 textInput 。当用户再可编辑区域输入字符时触发该事件。 立即下载

相关推荐

SAP FICO 消息号 FAA_POST042 技术清算科目中的余额:分类账 0L,货币 00、RMB、10000.00-

SAP FICO 消息号 FAA_POST042 技术清算科目中的余额:分类账 0L,货币 00、RMB、10000.00-

我好像病了的博客 2140

深入理解DOM事件类型系列第五篇——文本事件

前面的话   如果DOM结构发生变化,触发的是变动事件;如果文本框中的文本发生变化,触发的是文本事件   HTML5为input控件新增了很多type属性,大大增加了input控件的应用场景。其中一个是type="range"的input控件,可以通过拖动游标改变value值,但并不是所有浏览器都可以实时显示,除了IE10+浏览器 &lt;input type="range" min="...

weixin_33801856的博客 204

宏基因组分析|从Binning到MAG优化的全流程实战指南

本文提供了一份宏基因组分析从Binning到MAG优化的全流程实战指南。详细解析了宏基因组分箱(Binning)的核心原理与必要性,并手把手指导如何利用Bowtie2、MetaBAT2和CheckM等工具构建分箱流水线,进行质量评估与筛选,最终获得高质量宏基因组组装基因组(MAG)。文章还分享了常见问题排查与进阶优化策略,为后续物种分类、功能注释等深度分析奠定坚实基础。

weixin_29260291的博客 457

JavaScript中textInput事件详解(事件对象及与keypress事件的区别)

textInput 事件 textInput 事件是 DOM3 级事件中新加的事件,当用户在可编辑区域中输入字符时,就会触发这个事件。 textInput 和 keypress 区别 textInput 事件与 keypress 事件类似,但还是有一些区别: 任何可以获得焦点的元素都可以触发 keypress 事件,但只有可编辑区域才能触发 textInput 事件。 textInput 事件...

TalonZhang的博客 3983

别再乱改grub.cfg了!手把手教你用GRUB2自定义多系统启动菜单(含UEFI/BIOS双模式配置)

本文详细介绍了如何安全、高效地使用GRUB2自定义多系统启动菜单,涵盖UEFI/BIOS双模式配置。通过避免直接编辑grub.cfg文件,采用正确的配置方法和命令,帮助用户打造稳定且美观的启动环境,特别适合Linux多系统用户和开发者。

weixin_42553471的博客 590

基于结构的虚拟筛选模型 gnina 从源码编译

所需要的软件安装包: 安装 CUDA 装的时候看着点,第二个要你装驱动的选择,回答N,不装。 sudo sh cuda_10.0.130_410.48_linux.run sudo vim ~/.bashrc 在 ~/.bashrc 文件最后加上 export PATH=/usr/bin:/usr/local/cuda-10.0/bin${PATH} export LD_LIBRARY_PATH=/usr/local/cuda-10.0/lib64:${LD_LIBRARY_PATH} source ~

周迪新的博客 3190

javaScript高级程序设计------事件

但是往往我们在DOM结构建立完成的时候就需要对页面内容进行操作了,如果加载css等资源的时间过长,那么用户如果在这加载期间进行操作,就会给人没有响应的感受,脾气不好的用户很可能就会关掉网页,这当然不是我们想要看到的。除了mouseenter和mouseleave事件,其余的鼠标事件都会冒泡,也可以被取消,取消鼠标事件会影响浏览器的默认行为。取消事件的进一步捕获或冒泡,针对同一事件的多个事件处理程序(即事件终止于当前事件处理程序不会继续,就算是同一个元素的同一个事件的不同事件处理程序也不会触发)

m0_61773971的博客 418

VS2019手动添加bits/stdc++.h全指南(附解决‘无法打开源文件‘错误)

本文详细介绍了在Visual Studio 2019中手动配置C++万能头文件bits/stdc++.h的完整方法,解决常见的'无法打开源文件'错误。通过分析GCC与MSVC编译器生态差异,提供了纯手动创建和MinGW移植两种可靠方案,并给出详细的步骤、常见错误排查及最佳实践建议,帮助开发者高效配置竞赛开发环境。

weixin_29011395的博客 549

javascript基础从小白到高手系列一百五十七:textInput 事件

data 的值始终是要被插入的字符,因此如果在按S 键时没有按Shift 键,data。因为textInput 事件主要关注字符,所以在event 对象上提供了一个data 属性,包含要插入的。event 对象上还有一个名为inputMethod 的属性,该属性表示向控件中输入文本的手段。符被插入时才会触发,而keypress 对任何可能影响文本的键都会触发(包括退格键)。的值就是"s",但在按S 键时同时按Shift 键,data 的值则是"S"。 0,表示浏览器不能确定是什么输入手段;

wanmeijuhao的博客 432

绝缘检测是什么? 绝缘检测原理 绝缘检测检测的是什么?那个量?电压?电流?电阻?

绝缘电阻是电气设备和电气线路最基本的绝缘指标。对于低压电气装置的交接试验,常温下电动机、配电设备和配电线路的绝缘电阻不应低于0.5MΩ(对于运行中的设备和线路,绝缘电阻不应低于1MΩ/kV)。 绝缘电阻的正确测量方法 现代生活日新月异,人们一刻也离不开电。在用电过程中就存在着用电安全问题,在电器设备中,例如电机、电缆、家用电器等。 影响因素 环境温湿度 一般材料的绝缘电阻值随环境温湿度的升高而减小。相对而言,表面电阻(率)对环境湿度比较敏感,而体电阻(率)则对温度较为敏感。 湿度增加,表面泄漏增大,导体电导

dianqicyuyan的博客 2万+

ads设计Doherty功放(1)

Doherty功放的设计

qq_40995480的博客 2万+

JS的textinput事件

“DOM3级事件”规范中引入了一个新事件,名叫textInput。根据规范,当用户在可编辑区域中输入字符时,就会触发这个事件。这个用于替代keypress的textInput事件的行为稍有不同。区别之一就是任何可以获得焦点的元素都可以触发kepress事件,但只有可编辑...

chuanping7294的博客 956

利用SIMULINK搭建一个16QAM调制解调收发系统

1发送模块设计 根据前面介绍的理论知识,我们可以知道16QAM的基本结构,首先我来设计QAM发送段的SIMULINK仿真模块。 图1 16QAM的发送端模块 他的基本工作流程为:将信号通过两路升余弦滤波器,得到滤波以后的信号,滤波器的作用就是为了防止码间干扰。然后将滤波以后的信号和SIN,COS相乘得到调制信号,将调制 下面一一介绍每个模块的具体参数设置以及各个部分信号的波形图。 图2 产生随机数据的信号源 第一部分信号是产生一组随机的数字,作为信源,第二个模块将信号...

FPGA/MATLAB学习教程/源码/项目合作开发 4776

oninput事件&onpropertychange事件&onchange事件&textIput事件

oninput事件&amp;amp;amp;amp;amp;onpropertychange事件&amp;amp;amp;amp;amp;onchange事件 oninput事件 简介 input,select,textarea元素值更改时引发输入事件。 这个事件支持冒泡。如果窗口支持,则input,select,textarea元素也受支持。 注意:通过JavaScript改变input,select,textarea元素...

MountGao的博客 1071

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

DOM3 textInput事件

DOM3中引入了文本事件,其中之一 textInput 。 当用户再可编辑区域输入字符时触发该事件。 与keypress不同的是,该事件只会在用户输入可视字符时触发,而keypres事件则只要按下键即触发(如CapsLock,Backspace)。 可看到textInput考虑的主要是字符,可以通过事件对象的data属性获取所输入字符。 示例如下   &lt;!DOCTYPE HTM...

zhouruitao的专栏 192

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

事件之事件类型-键盘事件(KeyboardEvent)与输入事件(InputEvent)

一 定义:用户操作键盘时触发的,是基于原始的 DOM0 实现的 二 事件 事件 定义 keydown 用户按下键盘上某个键时触发,而且持续按住会重复触发 keypress 用户按下键盘上某个键并产生字符时触发,而且持续按住会重复触发。Esc 键也会 触发这个事件。 DOM3 Events 废弃了 keypress 事件,而推荐 textInput 事件 keyup 用户释放键盘上某个键时触发 场景 场景一:输入事件只有一个,即 text.

xiaoyangzhu的博客 6608

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

event事件的textInput属性必须要用DOM2处理

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="nav" contenteditable="true" style="width: 300px;height: 300px;border: 1px solid #333;"></div>

cdcdhj的博客 137

TextInput组件(绑定事件)

搜索框 在输入框中输入,点击搜索获取搜索款的 value 代码实现//TextInput组件(绑定事件)import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, TextInput, TouchableOpacity } from 'r

小毅哥哥的博客 3059

input text 的事件及方法

  事件 描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象

rootless的专栏 4809

textInput事件,event.inputMethod问题

问题描述 我们搜索“textInput事件”,你随便点击一篇介绍textInput事件的文章下面都会介绍到inputMethod属性,里面错误百出。我下面给出来自JS红皮书的原文。 这本书的最后修订2012年,虽然现在2020年,但是这本书非常的经典。听说快出新版本了,增加了ES6的内容。 textInput的问题 第一点 书中说支持textInput属性的浏览器有IE9+,Safari和Chrome。但是我自己验证的是IE9+不支持。 第二点 如果看了这本书的同学知道图中的例子是做了跨浏览器处理的。我们

qq_40515375的博客 484

textInput事件

这个事件是DOM3的,当用户往输入框里输入数据时触发 和keydown不同的是 keydown是用户的焦点点在输入框里就会触发,不管你有没有输入实际的数据,还是只是焦点停留在那里 而这个事件是一定当你往输入框里输入数据时才会触发 还可以通过事件对象的data属性获得用户输入的值 转载于:https://www.cnblogs.com/lanyueer/archive/2011/...

E78790602的博客 285

input text的所有事件

onBlur 当 text field失去聚焦的时候执行一些代码 onChange 当 text field失去聚焦并且它的值发生变动的时候执行一些代码 onClick 当用户在 text field中用鼠标左键点击时执行一些代码 onFocus 当 text field获得聚焦的时...

andaren6337的博客 195

输入框事件监听(一):keydown、keyup、input

当输入框的值发生变化时,我们可以通过keydown、keyup、input、onchange、blur事件观察到其值的变化,但它们的应用时机与应用场景存在显著的差异

甘焕的博客 9万+
上一篇: DOM3 textInput事件-softbar
下一篇: HDU_3786 找出直系亲属- softbar
普通网友
博客等级 码龄22年 1万+粉丝 3156原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值