当看不到输入时,input.select()不起作用

时间:2018-08-02 12:59:36

标签: javascript html css

我想在单击div时复制输入值,但是我无法使用它。这是我的代码:

function handleClick() {
    input.select();
    document.execCommand("copy");
}
#input {
  display: none
}
<div click="handleClick()">
  <input type="text" value="test" id="input">
</div>    

当我删除display:none的css样式时,我发现它可以工作。

为什么我不能隐藏输入元素?我只想使用输入的select(),但不想在页面上显示输入,我该怎么做?

2 个答案:

答案 0 :(得分:2)

您可以使用opacity ...代替可见性(但是元素将在那里占据空间...) 或者您可以使用position: absolute + top: -100px

function handleClick() {
    var input = document.getElementById("input");
    //var input = document.getElementById("input2"); //Use this class to test with other possibility 
    input.focus();
    input.select();
    var copy = document.execCommand("copy");    
}
#input {
  opacity: 0
}

/* Use this class to test with other possibility */
#input2{
  position: absolute;
  top: -100px;
}

#clicker{
  width: 250px;
  height: 75px;
  border: 1px solid;
}
<div id='clicker' onclick="handleClick()">
  <input type="text" value="test" id="input">
</div>
<br>
<input placeholder="Click DIV then PASTE here..."/>

答案 1 :(得分:0)

如果我错了,请纠正我。您的目标是正确隐藏输入标签?

那为什么不使用它呢?

<input type="hidden" id="custId" name="custId" value="3487">

然后将div更改为

<div onclick="handleClick()">