Question

我正在开发一个项目，我需要一个隐藏的输入字段来获取用户输入。

我有javascript，总是专注于输入字段。当div可见时，我可以看到打字。当我隐藏div类型并使div再次可见时，我看不到任何变化。我怎么能这样做，当div被隐藏时，它仍然会被用户输入？真的，如果除了隐藏之外还有其他方式，那就太好了。

<html>
<body>
<div id="diva">
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
</div>
<button onClick="javascript:change();">Show/Hide Div</button>
<script language="javascript" type="text/javascript">
<!--
 function change() {
    var div = document.getElementById('diva');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};
geta.focus();
// -->
</script>
</body>
</html>

使用Jeffman的想法修复副本：

<html>
<head>
<style>
input {
    position: absolute;
    left: -999em;
}
</style>
</head>
<body>
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
<button onClick="javascript:show();">Show</button><button onClick="javascript:hide();">Hide</button>
<script language="javascript" type="text/javascript">
<!--
 function hide() {
        document.getElementById('geta').style.position = 'absolute';
        document.getElementById('geta').style.left = '-999em';
    }
 function show() {
        document.getElementById('geta').style.position = 'absolute';
        document.getElementById('geta').style.left = '10em';
    }
geta.focus();
// -->
</script>
</body>
</html>

Answer 1

您是否只想尝试将任何用户输入捕获到隐藏的输入字段？

如果是这样，你可以在文档中添加一个onkeyup触发器，对于每个keyup，修改隐藏的输入字段。

否则，一旦你隐藏了一个元素，就会失去焦点。

简单示例：

我不知道您是否使用jQuery，所以这是一个非常原生的简单解决方案，放在您的头标记

document.onkeyup = function(e) {
    var input = document.getElementById('myinput');
    if (input.style.display == 'none') {
        input.value += String.fromCharCode(e.keyCode || e.which);
    }
};

Answer 2

我不认为在隐藏文本字段时可以输入文字字段。你的用例是什么？

隐藏输入字段并仍然进行用户输入

2 个答案: