Copying a label followed by input field contents

Given: A label Text followed by an input field similar to a form (e.g. Name: __ (input box) )

Requirement: Need to develop a mechanism to be able to copy both text and input field in a single go i.e. highlighting/selecting the entire line of text and input box.

Problem: CTRL + C only copies the text only and not the entire data along with input box.

Reason for such a requirement: I have a form in which Label is the domain of a website and input box is for author profile id (e.g. www.facebook.com/__ (input box) )

Behaviour intended: When User selects the entire www.facebook.com/ and the author id ( say john007) thinking he will paste "www.facebook.com/john007" somewhere.

Technicality: My clipboard should copy both the text & the input box contents.

Implementation: Was thinking of playing with CTRL + C events but cannot figure out the exact behaviour required.

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

Answers


I think this is not an appropriate usecase for the <label> element. I'd expect something like

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

Then one can input and select the full address. And you could add some script that eventually prefixes the string onkeyup and -paste.

Or you do something like that:

<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>

When the input changes, you'd snip the prefix from pasted urls in the input field, and change the text of the output field appropriately, from where the user could select and copy.

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

If you want to use Ctrl+C functionality you can use below code(But it works on 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>

Hope it helps... Cheers!!!


Need Your Help

Z3 ast_to_string() API with Subtraction

z3

The problem is pretty simple.

How to make a button reusable after the first click with AJAX/JQUERY and PHP

javascript php jquery mysql ajax

I have built a follow/unfollow Twitter like system using PHP. With help of this forum I have been successful creating a dynamic button that allows you to “follow” or “unfollow” each user, using AJAX/