0

给定：一个标签文本，后跟一个类似于表单的输入字段（例如名称：________（输入框））

要求：需要开发一种机制，能够一次性复制文本和输入字段，即突出显示/选择整行文本和输入框。

问题： CTRL+C仅复制文本而不是整个数据以及输入框。

提出这种要求的原因：我有一个表单，其中 Label 是网站的域，输入框用于作者个人资料 ID（例如www.facebook.com/_______ _（输入框））

预期行为：当用户选择整个www.facebook.com/和作者 ID（比如 john007）时，他认为他会在某处粘贴“www.facebook.com/john007”。

技术性：我的剪贴板应该复制文本和输入框的内容。

实施：正在考虑使用CTRL+C事件，但无法弄清楚所需的确切行为。

<div>
           <label>www.facebook.com/</label>
           <input  style="width:150px" type="Text" id="nameInput"/>
</div>
4

2 回答 2

0

我认为这不是<label>element的合适用例。我期待类似的东西

<div>
    <label for="nameInput">Facebook page:</label>
    <input type="text" id="nameInput" value="www.facebook.com/">
</div>

然后可以输入并选择完整的地址。您可以添加一些脚本，最终为字符串 onkeyup 和 -paste 添加前缀。

或者你做这样的事情：

<div>
    <label for="nameInput">Your profile id:</label>
    <input type="text" id="nameInput">
    (<label for="url">URL:</label>
    <output id="url">www.facebook.com/</output>)
</div>

当输入更改时，您将从输入字段中粘贴的 url 中剪下前缀，并适当地更改输出字段的文本，用户可以从中选择和复制。

// on ready
$("#nameInput").on("keyup paste input change", function(e) {
    var name = this.value.replace(/^(https?://www.facebook.com/)/, "");
    this.value = name;
    $("#url").text("www.facebook.com/"+name);
});
于 2012-07-25T12:13:21.160 回答
0

如果你想使用 Ctrl+C 功能，你可以使用下面的代码（但它适用于 IE）：

<html>
<head></head>
<body>
    <textarea rows="5" cols="20" wrap="hard" onblur="CopyToClipboard(this)"></textarea>
</body>

<script language="JavaScript">
function CopyToClipboard(text) {
    Copied = text.createTextRange();
    Copied.execCommand("Copy");
}test
</script>
</html>

希望它有帮助......干杯！

于 2012-07-25T13:48:32.603 回答