0

与えられたもの: フォームに似た入力フィールドが続くラベル Text (例: Name: ________ (input box) )

要件: テキストと入力フィールドの両方を一度にコピーできるメカニズムを開発する必要があります。つまり、テキストと入力ボックスの行全体を強調表示/選択します。

問題: CTRL+Cは入力ボックスとともにデータ全体ではなく、テキストのみをコピーします。

このような要件の理由: ラベルが Web サイトのドメインで、入力ボックスが作成者プロファイル 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

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 に答える
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 に答える