function afterPaste() { var clipData = clipboardData; var text = clipData.getData('text'); //剪贴板数据 var reg = /\s/g; var ntxt = text.replace(reg, ""); var that = this; //this.value = ntxt; 这种方式不行 必须setTimeout() setTimeout(function() { document.querySelector("#temp").value = ntxt }, 1); } function beforePaste() { var clipData = clipboardData; var text = clipData.getData('text'); //剪贴板数据 var reg = /\s/g; var ntxt = text.replace(reg, ""); clipData.setData("text", ntxt); }
/*
页面中input是不能粘贴进去换行符的的例如(ff,chrome会自动替换换行符,所以如果是chrome或者ff的话就不需要此方法了)
####
123123123
撒的发生的发斯蒂芬
阿萨德发斯蒂芬
###
粘贴到input时只能留下123123123。
解决的办法有两种
1.将input换成textarea,缺点textarea不能提交到后台(原生)
2.自己写js将clipboardData中的数据处理后在赋给input。这里有两个方法可以处理
2.1 onpaste (可以叫onafterpaste) 如果在这里边处理的话要用setTimeout(),不太优雅。
2.2 onbeforepaste 这里边可以将剪贴板的值处理后再放回剪贴板,然后粘贴到input时就是正确的数据了(推荐),
既然有第二种方法了为什么还要第一种方法呢,这是因为onbeforepaste方法只有ie浏览器支持,chrome,ff只有onpaste方法。如果为了兼容的话就只能用不优雅的地一种方法了。
*/
相关推荐
除了基本的字母限制之外,这里还添加了`onkeydown`、`onpaste`和`oncontextmenu`事件处理程序: - `onkeydown`通过`fncKeyStop(event)`函数阻止特定按键的操作; - `onpaste`阻止用户粘贴内容; - `oncontextmenu`...
只能输入英文 ...onkeydown=fncKeyStop(event) onpaste=return false oncontextmenu=return false /> 无法粘贴,右键不会弹出粘贴菜单 只能输入数字: <input onkeyup=this.value=this.value.
针对一些特殊的输入需求,例如只允许输入数字和小数点,同时防止粘贴操作带来的非法字符问题,可以通过结合 `onkeyup`, `onpaste` 和 `oncontextmenu` 事件实现: ```html <input type="text" onkeyup="value=value...
oncopy, oncut, onpaste事件 这些事件用于处理复制、剪切和粘贴操作。它们允许开发者自定义如何处理和存储被复制或剪切的内容,以及如何处理粘贴的内容。 #### 13. oncontextmenu事件 `oncontextmenu`事件在用户...
在文档中给出的代码示例中,使用了oncopy、oncut和onpaste这三个事件来分别阻止文本的复制、剪切和粘贴操作。这些事件的使用基本原理相同,即返回false值来阻止操作的完成。同时,还提到了通过监听键盘事件来阻止...
input>禁止键盘及中文输入,但又不能用readonly 而且还需兼容ie 和 ff , 为了完成这功能费了蛮大功夫,呵呵,在此记录以便日后之用;另外禁止粘贴 onpaste=”return false” 代码如下:<!DOCTYPE HTML PUBLIC ...
在JavaScript中,对...通过监听键盘事件(如`onkeyup`, `onkeydown`, `onkeypress`)和数据粘贴事件(如`onpaste`),结合正则表达式进行验证,我们可以创建强大的输入限制功能,确保用户输入的数据格式正确且有效。
4. **表单类事件**:`onChange`, `onInput`, `onSubmit`,这些事件在处理表单数据时非常重要。 5. **焦点类事件**:`onFocus`和`onBlur`分别表示元素获得和失去焦点。 6. **UI元素事件**:如`onScroll`,用于监听...
最后,HTML示例中输入框的`ondragenter`和`onpaste`事件处理程序也值得关注。`ondragenter="javascript:return false;"`和`onpaste="return false"`是为了防止用户通过拖放或复制粘贴非数字字符到输入框中。 总的来...
3. **禁止粘贴操作**:使用`onpaste`事件可以阻止用户在输入框中粘贴内容,例如:`<input onpaste="return false;">`。 4. **防止剪切和复制**:通过`oncopy`和`oncut`事件,可以禁止用户剪切或复制页面上的内容,...
在这个例子中,通过`onpaste`事件和`oncontextmenu`事件触发函数,防止用户通过粘贴或右键菜单插入非法字符。 需要注意的是,通过JavaScript来限制用户输入虽然可以提高前端的友好度,但并不完全安全,因为用户可能...
- **`oninput`**:元素获取用户输入时触发。适用于实时更新输入值的场景。 - **`onreset`**:表单重置时触发。常用于清除表单数据。 - **`onsearch`**:用户向搜索域输入文本时触发。可用于实现即时搜索功能。 - **`...
总的来说,通过CSS的`ime-mode`属性和JavaScript的`onpaste`事件,我们可以轻松地实现对文本框输入中文和粘贴功能的限制。这些控制方式可以帮助开发者更好地维护数据的规范性和安全性,尤其适用于需要特定格式输入的...
3. **禁止粘贴**:通过`onpaste`事件可以阻止用户在表单字段中粘贴内容,例如:`<input onpaste="return false;">`。 4. **防止剪切和复制**:结合`oncopy`和`oncut`事件可以禁用文本的复制和剪切功能,如:`<input...
input onpaste=”return false;” type=”text” name=”textfield” style=”width:400px; ime-mode:disabled” value=””> 2) 代码如下: [removed] function chkIt(frm){ if (frm.n1.value.length>0&&frm.n1....
这里,`onpaste`和`ondragenter`事件处理器直接返回`false`,从而阻止了粘贴和拖拽事件的默认行为。 #### 其他阻止操作的方法 除了上述方法,还有其他几种阻止特定操作的技巧,例如: 1. **右键菜单禁用**:通过...
3. **禁止粘贴功能**:通过`onpaste`事件,可以防止用户在输入框或表单中粘贴内容,例如`<input onpaste="return false;">`。 4. **禁止复制和剪切**:结合`oncopy`和`oncut`事件,可以阻止用户复制或剪切页面内容...