每个文本框值的Javascript onpaste事件应拆分并粘贴到相应的文本框中
Javascript onpaste event of everytext box value should be split and paste in corresponding textbox
严格禁止jQuery please.
我有文本1234ABC984IK4H2J
,我有四个文本框onpaste
我需要文本来拆分和复制在其余文本框中。纯粹在Javascript中没有jQuery,因为我的应用程序不支持jQuery和IE>8函数,所以没有像querySelectorAll
和addEventlistener
这样的功能支持。
.HTML
<td><input type="text" id="id1" maxlength="4" size="4" onpaste="paste();"></input></td>
<td><input type="text" id="id2" maxlength="4" size="4" onpaste="paste();"></input></td>
<td><input type="text" id="id3" maxlength="4" size="4" onpaste="paste();"></input></td>
<td><input type="text" id="id4" maxlength="4" size="4" onpaste="paste();"></input></td>
.JS
function paste(){
var inputs = new Array(6);
inputs[0] = document.getElementById("id1");
inputs[1] = document.getElementById("id2");
inputs[2] = document.getElementById("id3");
inputs[3] = document.getElementById("id4");
for (var i = 0, len = inputs.length;i < len; i++) {
var startingField = inputs[i].indexOf(e.target);
if (e.target.value.length > 4) {
completeTextFields(this.value, startingField);
}
}
}
//this is the code to fill the remaining text boxs
function completeTextFields(code, startingField) {
var fillFields = inputs.slice(startingField);
for (var i = 0, len = fillFields.length;i < len; i++) {
fillFields[i].value = code.slice(i * 4, i * 4 + 4);
}
}
尝试找到一种从 pasteEvent 获取文本的方法,最终找到了: JavaScript 获取粘贴事件上的剪贴板数据(跨浏览器)所以最后,我可以实现你想做的事情。
function bind() {
var inputs = [];
inputs[0] = document.getElementById("id1");
inputs[1] = document.getElementById("id2");
inputs[2] = document.getElementById("id3");
inputs[3] = document.getElementById("id4");
function paste(e) {
// Prevent the real paste to change the input value.
e.preventDefault();
var pastedText;
// Get text from paste event.
if(window.clipboardData && window.clipboardData.getData ) {
pastedText = window.clipboardData.getData('Text');
} else if( e.clipboardData && e.clipboardData.getData ){
pastedText = e.clipboardData.getData('text/plain');
}
// Start to fill text from left to right.
var i, len, str, startPlace = false;
for(i = 0, len = inputs.length ; i < len && pastedText.length > 0 ; ++i) {
// SKip input before selected one.
if (this === inputs[i]) { // The current focused input
startPlace = true;
var lengthRemain = 4 - this.value.length;
str = pastedText.slice(0, lengthRemain);
inputs[i].value += str;
pastedText = pastedText.slice(lengthRemain);
} else if (startPlace) {
// Cut a string from pastedStr, at most 4 char.
str = pastedText.slice(0, 4);
inputs[i].value = str;
// Cut the fron 4 char from pastedStr.
pastedText = pastedText.slice(4);
}
}
return false;
}
// Add EventListener, paste event will be a input param.
var i, len;
for (i = 0, len = inputs.length; i < len; ++i) {
inputs[i].addEventListener("paste", paste);
}
}
// Bind
bind();
<td><input type="text" id="id1" maxlength="4" size="4" /></td>
<td><input type="text" id="id2" maxlength="4" size="4" /></td>
<td><input type="text" id="id3" maxlength="4" size="4" /></td>
<td><input type="text" id="id4" maxlength="4" size="4" /></td>
请检查它是否是您想要的。
如何
从数字之间的差距中做到这一点应该遵循。
function bind() {
var inputs = [];
inputs[0] = document.getElementById("id1");
inputs[1] = document.getElementById("id2");
inputs[2] = document.getElementById("id3");
inputs[3] = document.getElementById("id4");
function paste(e) {
// Prevent the real paste to change the input value.
e.preventDefault();
var pastedText;
// Get text from paste event.
if(window.clipboardData && window.clipboardData.getData ) {
pastedText = window.clipboardData.getData('Text');
} else if( e.clipboardData && e.clipboardData.getData ){
pastedText = e.clipboardData.getData('text/plain');
}
// Start to fill text from left to right.
var i, len, str, startPlace = false;
for(i = 0, len = inputs.length ; i < len && pastedText.length > 0 ; ++i) {
// SKip input before selected one.
if (this === inputs[i]) { // The current focused input
startPlace = true;
var lengthRemain = 4 - this.value.length;
str = pastedText.slice(0, lengthRemain);
inputs[i].value += str;
pastedText = pastedText.slice(lengthRemain);
} else if (startPlace) {
// Cut a string from pastedStr, at most 4 char.
str = pastedText.slice(0, 4);
inputs[i].value = str;
// Cut the fron 4 char from pastedStr.
pastedText = pastedText.slice(4);
}
}
return false;
}
// Add EventListener, paste event will be a input param.
var i, len;
for (i = 0, len = inputs.length; i < len; ++i) {
inputs[i].addEventListener("paste", paste);
}
}
// Bind
bind();
<td><input type="text" id="id1" maxlength="4" size="4" /></td>
<td><input type="text" id="id2" maxlength="4" size="4" /></td>
<td><input type="text" id="id3" maxlength="4" size="4" /></td>
<td><input type="text" id="id4" maxlength="4" size="4" /></td>
相关文章:
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 是否<asp:文本框>有一个onFocusLost事件
- 手柄'img'单击事件并插入'alt'使用jQuery将属性转换为文本框
- IE8更改文本区域上的事件侦听器不工作
- 在文本区域禁用javascript定义的keydown事件并恢复默认行为
- 替代输入:基于按钮点击事件的文本更改处理程序
- 使用Javascript代码在文本框上激发退格事件
- 我能从“;输入“;事件是否有更好的方法来跟踪文本更改
- 我可以使用jqgrid的oncellselect事件根据单元格内容将文本颜色更改为蓝色吗
- 我需要使用kineticjs点击事件以任何所需的角度旋转画布中的文本
- EventSource 的响应具有非“文本/事件流”的 MIME 类型(“文本/纯文本”)
- 如何将值从文本框传递到自身事件
- angularjs 使用什么事件从文本输入中获取值
- 如何在按键事件发生后获取文本光标的位置
- 如何使asp文本框的按键事件
- 在onkeyup事件中未检测到文本区域更改
- 将指针事件限制为SVG文本填充
- 在单击事件上从所有类获取文本
- 关于使用Jquery创建的文本事件
- 使用DOM更新时不会触发输入文本事件