`
JavaSam
  • 浏览: 952035 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

input onpaste事件

 
阅读更多
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方法。如果为了兼容的话就只能用不优雅的地一种方法了。
*/
 

 

0
0
分享到:
评论

相关推荐

    input,验证,闪动,自动删除,限制输入

    除了基本的字母限制之外,这里还添加了`onkeydown`、`onpaste`和`oncontextmenu`事件处理程序: - `onkeydown`通过`fncKeyStop(event)`函数阻止特定按键的操作; - `onpaste`阻止用户粘贴内容; - `oncontextmenu`...

    JS验证input输入框(字母,数字,符号,中文)

    只能输入英文 ...onkeydown=fncKeyStop(event) onpaste=return false oncontextmenu=return false /> 无法粘贴,右键不会弹出粘贴菜单 只能输入数字: <input onkeyup=this.value=this.value.

    javascript 控制input只允许输入的各种指定内容.docx

    针对一些特殊的输入需求,例如只允许输入数字和小数点,同时防止粘贴操作带来的非法字符问题,可以通过结合 `onkeyup`, `onpaste` 和 `oncontextmenu` 事件实现: ```html <input type="text" onkeyup="value=value...

    [js]javascript事件集合(包有触发事件).pdf

    oncopy, oncut, onpaste事件 这些事件用于处理复制、剪切和粘贴操作。它们允许开发者自定义如何处理和存储被复制或剪切的内容,以及如何处理粘贴的内容。 #### 13. oncontextmenu事件 `oncontextmenu`事件在用户...

    JS input文本框禁用右键和复制粘贴功能的代码

    在文档中给出的代码示例中,使用了oncopy、oncut和onpaste这三个事件来分别阻止文本的复制、剪切和粘贴操作。这些事件的使用基本原理相同,即返回false值来阻止操作的完成。同时,还提到了通过监听键盘事件来阻止...

    input禁止键盘及中文输入,但可以点击

    input>禁止键盘及中文输入,但又不能用readonly 而且还需兼容ie 和 ff , 为了完成这功能费了蛮大功夫,呵呵,在此记录以便日后之用;另外禁止粘贴 onpaste=”return false” 代码如下:<!DOCTYPE HTML PUBLIC ...

    js-文本框输入限制.docx

    在JavaScript中,对...通过监听键盘事件(如`onkeyup`, `onkeydown`, `onkeypress`)和数据粘贴事件(如`onpaste`),结合正则表达式进行验证,我们可以创建强大的输入限制功能,确保用户输入的数据格式正确且有效。

    react 事件1

    4. **表单类事件**:`onChange`, `onInput`, `onSubmit`,这些事件在处理表单数据时非常重要。 5. **焦点类事件**:`onFocus`和`onBlur`分别表示元素获得和失去焦点。 6. **UI元素事件**:如`onScroll`,用于监听...

    JS input 数字验证代码

    最后,HTML示例中输入框的`ondragenter`和`onpaste`事件处理程序也值得关注。`ondragenter="javascript:return false;"`和`onpaste="return false"`是为了防止用户通过拖放或复制粘贴非数字字符到输入框中。 总的来...

    JavaScript中最常用的55个技巧

    3. **禁止粘贴操作**:使用`onpaste`事件可以阻止用户在输入框中粘贴内容,例如:`<input onpaste="return false;">`。 4. **防止剪切和复制**:通过`oncopy`和`oncut`事件,可以禁止用户剪切或复制页面上的内容,...

    javascript 控制input只允许输入的各种指定内容

    在这个例子中,通过`onpaste`事件和`oncontextmenu`事件触发函数,防止用户通过粘贴或右键菜单插入非法字符。 需要注意的是,通过JavaScript来限制用户输入虽然可以提高前端的友好度,但并不完全安全,因为用户可能...

    HTML DOM 事件.pdf

    - **`oninput`**:元素获取用户输入时触发。适用于实时更新输入值的场景。 - **`onreset`**:表单重置时触发。常用于清除表单数据。 - **`onsearch`**:用户向搜索域输入文本时触发。可用于实现即时搜索功能。 - **`...

    关于文本框的一些限制控制总结~~

    总的来说,通过CSS的`ime-mode`属性和JavaScript的`onpaste`事件,我们可以轻松地实现对文本框输入中文和粘贴功能的限制。这些控制方式可以帮助开发者更好地维护数据的规范性和安全性,尤其适用于需要特定格式输入的...

    Javascript中最常用的55个经典技巧

    3. **禁止粘贴**:通过`onpaste`事件可以阻止用户在表单字段中粘贴内容,例如:`<input onpaste="return false;">`。 4. **防止剪切和复制**:结合`oncopy`和`oncut`事件可以禁用文本的复制和剪切功能,如:`<input...

    JS只能输入数字或数字和字母等的正则表达式

    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....

    CCS文本框禁止拖拽和粘贴

    这里,`onpaste`和`ondragenter`事件处理器直接返回`false`,从而阻止了粘贴和拖拽事件的默认行为。 #### 其他阻止操作的方法 除了上述方法,还有其他几种阻止特定操作的技巧,例如: 1. **右键菜单禁用**:通过...

    javascript常用的57个技巧

    3. **禁止粘贴功能**:通过`onpaste`事件,可以防止用户在输入框或表单中粘贴内容,例如`<input onpaste="return false;">`。 4. **禁止复制和剪切**:结合`oncopy`和`oncut`事件,可以阻止用户复制或剪切页面内容...

Global site tag (gtag.js) - Google Analytics