Question

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

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

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

此类要求的原因：我有一个表单，其中Label是网站的域名，输入框是作者个人资料ID （例如www.facebook.com/ _ _ （输入框））

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

学术性：我的剪贴板应该复制文本＆amp;输入框内容。

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

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

Answer 1

我认为这不是<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>

当输入发生变化时，您将从输入字段中的粘贴网址中剪切前缀，并相应地更改输出字段的文本，用户可以从中选择和复制。

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

Answer 2

如果你想使用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>

希望它有所帮助......干杯!!!

复制标签后跟输入字段内容

2 个答案: