用对话框覆盖文本输入

cover a text input with a dialog

本文关键字：输入 文本 覆盖 对话框      更新时间：2023-09-26

我正在尝试放置一个包含两个选项"yes"和"no"的对话框，该对话框涵盖了文本输入，因此用户必须选择其中一个选项才能输入。它应该是透明的，并且仅涵盖文本输入。

在这种情况下我可以使用什么技巧？

您可以将input disabled属性设置为true，将button元素css position设置为absolute以覆盖input;在button元素的click处，将button元素的top设置为位于input下方，调整button元素的opacity;在input处删除disabled属性;button onclick将处理程序设置为null 

var buttons = document.querySelectorAll("button");
var input = document.querySelector("input");
var label = document.querySelector("label");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function(e) {
    label.innerHTML = e.target.innerHTML;
    input.removeAttribute("disabled");
    for (var j = 0; j < buttons.length; j ++) {
      buttons[j].className = "show";
      buttons[j].disabled = true;
      buttons[j].onclick = null;
    }
  }
}
button {
  display:block;
  width: 75px;
  height:50px;
  appearance:button;
  opacity:.5;
  position:absolute;
}
button:nth-of-type(2) {
  left:82px;
}
input {
  width:145px;
}
.show {
  top:28px;
  opacity:.25;
}
<button>Yes</button><button>No</button>
<input type="text" disabled /><label></label>

为了简化起见，首先将"disabled"属性添加到输入中。这将阻止用户键入输入。

<input type="text" id="inputId" disabled"/>

然后创建带有两个按钮"是"和"否"的对话框。将 js 函数附加到启用文本输入并删除对话框的 yes 块。

<button onclick="yesFunc()">Yes</button>
function yesFunc() {
    document.getElementById('inputId').removeAttr('disabled');
    document.getElementByI('dialogId').css('display','none');
}

然后从那里它所有的造型

相关文章：