我需要在每个输入字段中弹出numpad。。使用javascript
我已经创建了一个输入字段和一个按钮，每当用户点击输入字段numpad弹出窗口时就会出现。我使用循环来创建额外的输入字段。当我单击第一个输入字段时，弹出窗口会出现，但当我单击第二个输入字段时，第三个输入字段不会显示弹出窗口我需要在每个输入字段中弹出numpad。。使用javascript,javascript,html,Javascript,Html,我已经创建了一个输入字段和一个按钮，每当用户点击输入字段numpad弹出窗口时就会出现。我使用循环来创建额外的输入字段。当我单击第一个输入字段时，弹出窗口会出现，但当我单击第二个输入字段时，第三个输入字段不会显示弹出窗口 window.addEventListener("load", function(){ // Bare minimum - provide the ID numpad.attach({
window.addEventListener("load", function(){
// Bare minimum - provide the ID
numpad.attach({
id : "demo-numpad-1",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-2",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-3",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});..
});
<input type="text" id="demo-numpad-1" maxlength="6"/>
<button class="button" onclick="add_fields()">Add</button>
<div id="room_fileds">
//here i am creating input fields.
</div>
window.addEventListener("load", function(){
// Bare minimum - provide the ID
numpad.attach({
id : "demo-numpad-1",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-2",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-3",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});..
});
window.addEventListener("load", function(){
// Bare minimum - provide the ID
numpad.attach({
id : "demo-numpad-1",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-2",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-3",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});..
});
var numpad = {
/* [INIT - DRAW THE ON-SCREEN NUMPAD] */
selector : null, // will hold the entire on-screen numpad
display : null, // will hold the numpad display
zero : null, // will hold the zero button
dot : null, // will hold the dot button
init : function () {
// CREATE THE NUMPAD
numpad.selector = document.createElement("div");
numpad.selector.id = "numpad-back";
var wrap = document.createElement("div");
wrap.id = "numpad-wrap";
numpad.selector.appendChild(wrap);
// ATTACH THE NUMBER DISPLAY
numpad.display = document.createElement("input");
numpad.display.id = "numpad-display";
numpad.display.type = "text";
numpad.display.readOnly = true;
wrap.appendChild(numpad.display);
// ATTACH BUTTONS
var buttons = document.createElement("div"),
button = null,
append = function (txt, fn, css) {
button = document.createElement("div");
button.innerHTML = txt;
button.classList.add("numpad-btn");
if (css) {
button.classList.add(css);
}
button.addEventListener("click", fn);
buttons.appendChild(button);
};
buttons.id = "numpad-btns";
// First row - 7 to 9, delete.
for (var i=7; i<=9; i++) {
append(i, numpad.digit);
}
append("⤆", numpad.delete, "ng");
// Second row - 4 to 6, clear.
for (var i=4; i<=6; i++) {
append(i, numpad.digit);
}
append("C", numpad.reset, "ng");
// Third row - 1 to 3, cancel.
for (var i=1; i<=3; i++) {
append(i, numpad.digit);
}
append("✖", numpad.hide, "cx");
// Last row - 0, dot, ok
append(0, numpad.digit, "zero");
numpad.zero = button;
append(".", numpad.dot);
numpad.dot = button;
append("✔", numpad.select, "ok");
// Add all buttons to wrapper
wrap.appendChild(buttons);
document.body.appendChild(numpad.selector);
},
/* [ATTACH TO INPUT] */
attach : function (opt) {
// attach() : attach numpad to target input field
var target = document.getElementById(opt.id);
if (target!=null) {
// APPEND DEFAULT OPTIONS
if (opt.readonly==undefined || typeof opt.readonly!="boolean") { opt.readonly = true; }
if (opt.decimal==undefined || typeof opt.decimal!="boolean") { opt.decimal = true; }
if (opt.max==undefined || typeof opt.max!="number") { opt.max = 16; }
// SET READONLY ATTRIBUTE ON TARGET FIELD
if (opt.readonly) { target.readOnly = true; }
// ALLOW DECIMALS?
target.dataset.decimal = opt.decimal ? 1 : 0;
// MAXIMUM ALLOWED CHARACTERS
target.dataset.max = opt.max;
// SHOW NUMPAD ON CLICK
target.addEventListener("click", numpad.show);
} else {
console.log(opt.id + " NOT FOUND!");
}
},
target : null, // contains the current selected field
dec : true, // allow decimals?
max : 16, // max allowed characters
show : function (evt) {
// show() : show the number pad
// Set current target field
numpad.target = evt.target;
// Show or hide the decimal button
numpad.dec = numpad.target.dataset.decimal==1;
if (numpad.dec) {
numpad.zero.classList.remove("zeroN");
numpad.dot.classList.remove("ninja");
} else {
numpad.zero.classList.add("zeroN");
numpad.dot.classList.add("ninja");
}
// Max allowed characters
numpad.max = parseInt(numpad.target.dataset.max);
// Set display value
var dv = evt.target.value;
if (!isNaN(parseFloat(dv)) && isFinite(dv)) {
numpad.display.value = dv;
} else {
numpad.display.value = "";
}
// Show numpad
numpad.selector.classList.add("show");
},
hide : function () {
// hide() : hide the number pad
numpad.selector.classList.remove("show");
},
/* [BUTTON ONCLICK ACTIONS] */
delete : function () {
// delete() : delete last digit on the number pad
var length = numpad.display.value.length;
if (length > 0) {
numpad.display.value = numpad.display.value.substring(0, length-1);
}
},
reset : function () {
// reset() : reset the number pad
numpad.display.value = "";
},
digit : function (evt) {
// digit() : append a digit
var current = numpad.display.value,
append = evt.target.innerHTML;
if (current.length < numpad.max) {
if (current=="0") {
numpad.display.value = append;
} else {
numpad.display.value += append;
}
}
},
dot : function () {
// dot() : add the decimal point (only if not already appended)
if (numpad.display.value.indexOf(".") == -1) {
if (numpad.display.value=="") {
numpad.display.value = "0.";
} else {
numpad.display.value += ".";
}
}
},
select : function () {
// select() : select the current number
var value = numpad.display.value;
// No decimals allowed - strip decimal
if (!numpad.dec && value%1!=0) {
value = parseInt(value);
}
// Put selected value to target field + close numpad
numpad.target.value = value;
numpad.hide();
}
};
/* [INIT] */
window.addEventListener("load", numpad.init);
var numpad={
/*[初始化-绘制屏幕上的NUMPAD]*/
选择器：null，//将保存整个屏幕numpad
display:null，//将保留numpad显示
zero:null，//将保留zero按钮
点：null，//将按住点按钮
init：函数（）{
//创建NUMPAD
numpad.selector=document.createElement（“div”）；
numpad.selector.id=“numpad back”；
var wrap=document.createElement（“div”）；
wrap.id=“numpad wrap”；
numpad.selector.appendChild（换行）；
//连接数字显示器
numpad.display=document.createElement（“输入”）；
numpad.display.id=“numpad display”；
numpad.display.type=“text”；
numpad.display.readOnly=true；
wrap.appendChild（numpad.display）；
//附加按钮
var buttons=document.createElement（“div”），
按钮=空，
append=函数（txt、fn、css）{
按钮=document.createElement（“div”）；
button.innerHTML=txt；
button.classList.add（“numpad btn”）；
如果（css）{
按钮.classList.add（css）；
}
按钮。addEventListener（“单击”，fn）；
按钮。追加子项（按钮）；
};
buttons.id=“numpad btns”；
//第一行-7至9，删除。
对于（var i=7；i您只需将其放在add_字段
函数的底部，就在objTo.appendChild（divtest）
之后：
window.addEventListener("load", function(){
// Bare minimum - provide the ID
numpad.attach({
id : "demo-numpad-1",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-2",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-3",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});..
});
另外，您应该只有一个调用numpad.attach
内部onload事件，因为您只有一个输入。在页面加载时，您正在将所有演示numpad项目附加到numpad，但这些项目还不存在。因此，您必须在创建它们之后附加它们。兄弟，我不明白，请告诉我在上面的代码中要修改什么…是的，我知道。我的意思是，onload事件只在beggining运行一次，之后应该为每个新输入调用numpad.attach，这应该在单击按钮（add_fields函数）时发生。
window.addEventListener("load", function(){
// Bare minimum - provide the ID
numpad.attach({
id : "demo-numpad-1",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-2",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});
numpad.attach({
id : "demo-numpad-3",
readonly : false,
// Allow decimal points? True by default
decimal : false,
// Maximum allowed characters, 16 by default
// Feel free to modify the script to set a maximum allowed number instead
max : 6
});..
});