从文本区删除选定的文本

delete selected text from textarea

本文关键字：文本 文本区 删除      更新时间：2023-09-26

我有一个html页面，其中我有一个文本框(键入您的文本)和TextArea列表。我需要在文本框中输入，然后单击添加按钮，以便文本框中的内容进入我的TextArea列表。我需要在文本框中输入下面的格式。

Name=Value

用户将使用该文本框快速将名称值对添加到该文本框下方的列表中。假设我们在上面的文本框中输入Hello=World，然后点击添加，那么在下面的列表中，它应该显示为

Hello=World

如果我们再次在同一文本框中输入ABC=PQR，那么在下面的列表中，它应该显示如下，这意味着它应该继续在其原始条目下方添加新的名称值对。

Hello=World
ABC=PQR

但是如果语法不正确，比如它不在Name=Value对中，那么它不应该向列表中添加任何内容，而是显示弹出错误的输入格式。名称和值只能包含字母数字字符。我还有两个按钮Sort by name和Sort by value。一旦我单击这两个按钮中的任何一个，那么它应该使用名称或值对TextArea列表中的条目进行排序。现在我所有的东西都工作得很好，没有任何问题。

我添加了另一个按钮称为Delete。基本上，当按下Delete按钮时，列表框中所有选中的项目都应该被删除。如何添加此功能?我不能理解这个

这是我的护照。我需要使用纯HTML和Javascript，我不想使用任何库，因为我想保持它的简单，因为我还在学习。 下面是我的代码: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
    #my-text-box {
        font-size: 18px;
        height: 1.5em;
        width: 585px;
    }
    textarea{
        width:585px;
        height:300px;
    }
    .form-section{
        overflow:hidden;
        width:700px;
    }
    .fleft{float:left}
    .fright{float:left; padding-left:15px;}
    .fright button{display:block; margin-bottom:10px;}
</style>
<script language="javascript" type="text/javascript">
    document.getElementById('add').onclick = addtext;
    function addtext() {
        var nameValue = document.getElementById('my-text-box').value;
        if (/^([a-zA-Z0-9]+=[a-zA-Z0-9]+)$/.test(nameValue))
            document.getElementById('output').textContent += nameValue + ''n';
        else
            alert('Incorrect Name Value pair format.');
    }
    document.getElementById('sortbykey').onclick = sortByKey;
    function sortByKey() {
        var textarea = document.getElementById("output");
        textarea.value = textarea.value.split("'n").sort(function(a, b){
            if(a != "" && b != ""){
                return a.split('=')[0].localeCompare(b.split('=')[0])
            } else {
                return 0
            }
        }).join("'n");
    }
    document.getElementById('sortbyvalue').onclick = sortByValue;
    function sortByValue() {
        var textarea = document.getElementById("output");
        textarea.value = textarea.value.split("'n").sort(function(a, b){
            if(a != "" && b != ""){
                return a.split('=')[1].localeCompare(b.split('=')[1])
            } else {
                return 0
            }
        }).join("'n");
    }
</script>
</head>
<body>
    <h3>Test</h3>
    <label for="pair">Type your text</label></br>
    <div class="form-section">
        <div class="fleft">
            <input type='text' id='my-text-box' value="Name=Value" />
        </div>
        <div class="fright">
            <button id='add' type="button">Add</button>
        </div>
    </div>
    </br>
    </br>
    </br>
    <label for="pairs">Name/Value Pair List</label></br>
    <div class="form-section">
        <div class="fleft">
           <textarea id='output'></textarea>
        </div>
        <div class="fright">
            <button type="button" id='sortbykey' onclick='sortByKey()'>Sort by name</button>
            <button type="button" id='sortbyvalue' onclick='sortByValue()'>Sort by value</button>
        </div>
    </div>
</body>
</html>

如果您使用<select>而不是<texarea>并将您的值/名称对添加为<option>，则会更容易。希望对大家有所帮助

您可以使用如下代码:

document.getElementById('btnDelete').onclick = deleteText;
function deleteText() {
    var textComponent = document.getElementById('output'),
        selectedText = getSelectedText(textComponent);
    if (!selectedText) return;
    textComponent.value = textComponent.value.replace(''n' + selectedText, '');
}
// http://stackoverflow.com/questions/1058048/how-to-get-selected-text-inside-a-textarea-element-by-javascript
function getSelectedText(textComponent)
{
    var selectedText = '';
    if (document.selection != undefined) { // IE
        textComponent.focus();
        var sel = document.selection.createRange();
        selectedText = sel.text;
    } else if (textComponent.selectionStart != undefined) { // other browsers
        var startPos = textComponent.selectionStart;
        var endPos = textComponent.selectionEnd;
        selectedText = textComponent.value.substring(startPos, endPos)
    }
    return selectedText;
}

我建议使用数组。在这个方法中，您可以运行一个函数，将"textbox"的值存储在一个数组中(然后清除该字段)。例:

var newText = document.forms[0].elements[0].value;
//This retrieves and stores the value of 'textbox' into variable 'newText'.
myArray[myArray.length] = newText 
//This adds the value of 'newText' to an array named 'myArray'
document.forms[0].elements[0].value = "";
//This line is optional, it would clear the 'textbox', so you wouldn't have to clear it manually

现在您已经存储了"命令"，您可以利用for循环直接将数组的内容打印到textarea，或者避免循环并将数组打印成字符串，然后在textarea中打印字符串。(注意:如果您将来需要编辑/更改/删除单独的提示符，使用数组可能会更有帮助。)

相关文章：