Question

我正在尝试设置一个包含两个选项“是和否”的对话框，其中包含文本输入，因此用户必须先选择其中一个选项才能输入。它应该是透明的，只有封面只输入文字。

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

Answer 1

简化添加“禁用”功能。首先输入属性。这将阻止用户输入输入。

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

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

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

然后从那里开始所有造型

Answer 2

您可以将input disabled属性设置为true，将button元素css position设置为absolute以涵盖input {1}};在click button个元素的top元素中，将button个input个元素设置为opacity以下的位置，调整button元素的disabled个元素。移除input处的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; } } }

＆＃13;

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;
}

＆＃13;

<button>Yes</button><button>No</button>
<input type="text" disabled /><label></label>

＆＃13;

paste_data_images: true,
images_upload_url: '/YourController/UploadImage',
images_upload_base_path: '/some/basepath'

＆＃13;

用对话框覆盖文本输入

2 个答案: