oninput

oninput,onpropertychange,onchange的用法和区别

浪子不回头ぞ 提交于 2020-03-29 17:16:57
1、前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”。如下图所示: 因此,稍微研究了一下oninput,onpropertychange,onchange的区别和用法,以及onpropertychange在ie浏览器下的一个bug。 2、oninput,onpropertychange,onchange的用法 l onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur); l onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的; l oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。 在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。 3、代码实现:

oninput,onpropertychange,onchange的用法和区别

早过忘川 提交于 2020-03-24 07:49:51
1、前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”。如下图所示: 因此,稍微研究了一下oninput,onpropertychange,onchange的区别和用法,以及onpropertychange在ie浏览器下的一个bug。 2、oninput,onpropertychange,onchange的用法 l onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur); l onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的; l oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。 在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。 3、代码实现:

oninput,onpropertychange,onchange的用法和区别

☆樱花仙子☆ 提交于 2020-03-24 07:49:40
1、前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”。如下图所示: 因此,稍微研究了一下oninput,onpropertychange,onchange的区别和用法,以及onpropertychange在ie浏览器下的一个bug。 2、oninput,onpropertychange,onchange的用法 l onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur); l onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的; l oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。 在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。 3、代码实现:

反射型xss

柔情痞子 提交于 2020-03-05 12:16:06
注入的本质就是:把用户的输入的数据当作代码执行。 xss注入的关键:1、第一个是用户能够控制输入 2、原本程序要执行的代码,拼接了用户输入的数据 xss主要拼接的是什么? sql注入拼接的是操作数据库的sql语句。xss拼接的是网页的html代码。我们一般会拼接出合适的html代码去执行恶意的js语句。 xss能做什么? 盗取cooike、获取内网ip,等等。应为达到各种各样的效果需要比较复杂的代码,所以xss平台应哟个而生,{xsspt.com}xss平台大大方便了xss攻击,只需要引入一个平台就可以实现功能。 xss的类型 1、反射型xss(你提交了数据成功实现了xss。但是这是对你这次访问产生了影响,并非持久性攻击) 2、储存型xss(你提交了数据成功实现了xss。并且存入了数据库,别人访问这个页面的时候就会自动出发) 3、dom型xss(较复杂) 怎么检测是否存在xss? 1、一般方法是让浏览器弹窗(alert)经典的弹窗语句:<script>alert(5)</script> 2、一般证明xss是不是存在,就是在正常页面传参然后构建参数让他弹窗就是存在xss了 xss真的执行恶意代码的实际上是js语句,有三种类型 1、<script></script>(这个是定义Js的标签) 2、javascript:alert(1)经典代码<a href=JavaScript

自定义验证码数字键盘

主宰稳场 提交于 2020-01-30 04:33:47
自定义验证码数字键盘 序言 我们会遇到很多输入六位数,四为数的验证码界面 文章目录 自定义验证码数字键盘 序言 最终效果如下 问题 预期操作方式 实现 输入框界面思路 键盘界面的思路 思路总结 输入框代码 总结 最终效果如下 问题 那我们做这类界面的时候遇到的什么问题呢 需要有四个或者六个固定的输入框供用户输入 输入框内不能有光标,用户只能从后往前删除数字 如果用edittext那么会一直有光标可以选择,文字输入一个之后跳转到另一个会有一定的bug,包括edittext的聚焦,光标显示在不对的输入框内的问题等等 如果用原生的键盘,那么有的时候不可避免的用户可以切换到标点符号输入键盘,有的甚至可以到英文键盘,这样需要过滤掉这些不能输入的字符。而且用户切换过去之后不好切回来体验极差 输入框的唤醒,我们很难很好的去操作输入框的显示和隐藏,这是很蛋疼的代码,可能你要写很多代码才能去隐藏掉原生的输入框,然后在有些机型上可能这个代码并没什么效果。 预期操作方式 那我们预期达到的操作方式是什么呢,我们假设用户是傻子或者好奇心极强,以及故意找漏洞的不怀好意的人。 我们希望用户只能点击,甚至只能看到数字键盘,连一个标点符号按钮都看不到 我们希望用户不要去随意的换输入框去输入数字,只能从前往后输入,只能从后往前删除 这样的输入框可能很简单很呆板,但是体验非常好,也避免了不怀好意的用户用出很多问题

实时监听输入框值变化的完美方案:oninput & onpropertychange

爷,独闯天下 提交于 2020-01-02 10:17:19
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。 oninput 事件在主流浏览器的兼容情况如下:      从上面表格可以看出, oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况: 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。 修改了 select 元素的选中项,selectedIndex 属性发生变化。   在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。   集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <head>

某东搜索框终结版!!!

南笙酒味 提交于 2019-12-04 02:22:05
以上是某东搜索框为力求同步写了以下代码。文字消失和怎样获取焦点失去焦点事件方法就不在一一赘述! 以下用到表单事件: Form 事件 由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中): 属性 值 描述 onblur script 元素失去焦点时运行的脚本。 onchange script 在元素值被改变时运行的脚本。 oncontextmenu script 当上下文菜单被触发时运行的脚本。 onfocus script 当元素获得焦点时运行的脚本。 onformchange script 在表单改变时运行的脚本。 onforminput script 当表单获得用户输入时运行的脚本。 oninput script 当元素获得用户输入时运行的脚本。 oninvalid script 当元素无效时运行的脚本。 onreset script 当表单中的重置按钮被点击时触发。HTML5 中不支持。 onselect script 在元素中文本被选中后触发。 onsubmit script 在提交表单时触发。 下面是代码环节 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0;

How to correctly pass props to a component with RxJS in Angular 4?

匿名 (未验证) 提交于 2019-12-03 09:52:54
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: Here is my component: @Component ({ selector : 'bc-goods-detail' , template : ` <span>good id: {{good?.id}}</span> <input [value]="good?.name" (input)="onInput($event)" /> <button (click)="onClick()">Save</button> ` , styles : [] }) export class GoodsDetailComponent { @Input () good : Good ; @Output () save = new EventEmitter < Good >(); onClick () { this . save . emit ( this . good ); } onInput ( $event ) { this . good . name = $event . target . value ; } } When I change the name in input and then I am pressing save button and

js实时监听input输入框值的变化以便即使匹配搜索项

删除回忆录丶 提交于 2019-12-03 02:30:25
问题说明 在含有搜索框的网页中,经常需要及时匹配搜索项,因此需要监听input输入框的变化事件。如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话,除了监听不了右键的复制、剪贴和粘贴这些操作以外,在输入中文的拼音时同样触发,增加请求数不说还浪费流量。 解决方案 本文结合标准的oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。 代码实现 $().ready(function(){ //页面加载完毕绑定输入框的oninput事件 var bind_name='input'; if(navigator.userAgent.indexOf("MSIE")!=-1) { bind_name='propertychange'; } $('input').on(bind_name, function() { do something... }); }); 参考链接: http://www.runoob.com/jsref/event

Paste event in Javascript

匿名 (未验证) 提交于 2019-12-03 02:16:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: How can I handle the paste selected through right click in javascript? I tried with "onpaste" event and all other html events available but nothing works. 回答1: The onpaste event should work in all modern browsers ( UPD Including Opera >= 12.10 1 ). Bind it in jQuery like this: Here's a live example: http://jsfiddle.net/7N6Xq/ In pure JavaScript it would look something like this for modern browsers elem.addEventListener ("paste", handler, false); // all browsers and IE9+ and for old IE versions: elem.attachEvent ("onpaste", handler); // IE<9