This JavaScript example demonstrates how to highlight text inside one textarea and automatically transfer the selected text into another textarea when the mouse button is released.

Each new selection is added as a comma-separated value while preventing duplicate entries and unnecessary trailing commas.

This type of text-to-text copy system can be useful for quick data collection, phrase grouping, list building, editor tools, custom form systems, and interactive text-processing applications.

Live Template Example -

[How it works]

Left-click and select the text you want copied over. When you let off the left mouse button, the text will be copied.
Double-click on single words, and they will be copied over.

[HTML - ]

CFFCS | CarrzSynEdit: | HTML (Hyper Text Markup Language)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Copy Selected Text To Keywords</title>

<link href="Load.css" rel="stylesheet" />
</head>

<body>

<div class="demo-wrap">

    <h2>
        Copy Selected Text To Keywords
    </h2>

    <label class="label" for="textareaone">
        Description Text
    </label>

    <textarea id="textareaone">Highlight words or phrases in this textarea.
When you release the left mouse button, the selected text will automatically be copied into the keyword textarea below.
Duplicate entries are ignored.</textarea>

    <label class="label" for="textareatwo">
        Keywords
    </label>

    <textarea id="textareatwo"></textarea>

    <div class="info">
        Highlight the text above using your mouse.
        The selection will automatically be added to the keyword list.
    </div>

</div>

<script src="Load.js"></script>

</body>
</html>

[CSS - ]

CFFCS | CarrzSynEdit: | CSS (Cascading Style Sheets)

body{
    margin:40px;
    background:#ffffff;
    font-family:Segoe UI, Arial, sans-serif;
    color:#222;
}

.demo-wrap{
    max-width:900px;
    margin:0 auto;
}

h2{
    margin-bottom:20px;
    color:#3c4a73;
}

.label{
    display:block;
    margin:15px 0 8px 0;
    font-weight:bold;
    color:#444;
}

textarea{
    width:100%;
    min-height:140px;
    padding:12px;

    border:1px solid #d6dce8;
    border-radius:6px;

    background:#fafbfd;

    font-size:1rem;
    line-height:1.7;

    resize:vertical;
    outline:none;

    transition:border-color .2s ease, box-shadow .2s ease;
}

textarea:focus{
    border-color:#4a90e2;

    box-shadow:
        0 0 0 3px rgba(74,144,226,.14);
}

.info{
    margin-top:12px;
    padding:10px 14px;

    border-left:1px solid #d6dce8;

    background:#fafbfd;

    line-height:1.7;
    color:#555;
}

[JavaScript - ]

CFFCS | CarrzSynEdit: | JS (JavaScript)

const textareaone = document.getElementById("textareaone");
const textareatwo = document.getElementById("textareatwo");

textareaone.addEventListener("mouseup", function () {

    let selectedText = window.getSelection().toString().trim();

    if(selectedText === ""){
        return;
    }

    let currentValues = textareatwo.value
        .split(",")
        .map(v => v.trim())
        .filter(v => v !== "");

    if(!currentValues.includes(selectedText)){

        currentValues.push(selectedText);

        textareatwo.value = currentValues.join(", ");

    }

});