Fatal编程技术网
  • javascript/
  • Javascript 从文本区域删除所选文本

Javascript 从文本区域删除所选文本

javascript html css

Javascript 从文本区域删除所选文本,javascript,html,css,Javascript,Html,Css,我有一个html页面，其中有一个文本框（键入文本）和文本区域列表。我需要在文本框中键入内容，然后单击“添加”按钮，这样文本框中的任何内容都会进入我的文本区域列表。我需要在文本框中输入以下格式 Name=Value 用户将使用此文本框将名称-值对快速添加到该文本框正下方的列表中。假设我们在上面的文本框中键入Hello=World，然后单击add，那么在下面的列表中，它应该显示为 Hello=World 如果我们在同一个文本框中再次键入ABC=PQR，那么在下面的列表中，它应该显示为这样，这意味

我有一个html页面，其中有一个文本框（键入文本）和文本区域列表。我需要在文本框中键入内容，然后单击“添加”按钮，这样文本框中的任何内容都会进入我的文本区域列表。我需要在文本框中输入以下格式

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

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

Hello=World
ABC=PQR
但是如果语法不正确，比如它不在Name=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>


试验
#我的文本框{
字号：18px；
高度：1.5em；
宽度：585px；
}
文本区{
宽度：585px；
高度：300px；
}
.表格组{
溢出：隐藏；
宽度：700px；
}
.fleft{float:left}
.fright{float:左；padding left:15px；}
.fright按钮{显示：块；页边距底部：10px；}
document.getElementById（'add'）。onclick=addtext；
函数addtext（）{
var nameValue=document.getElementById（'my-text-box'）.value；
如果（/^（[a-zA-Z0-9]+=[a-zA-Z0-9]+）$/。测试（名称值））
document.getElementById（'output'）.textContent+=nameValue+'\n'；
其他的
警报（“名称-值对格式不正确”）；
}
document.getElementById（'sortbykey'）。onclick=sortbykey；
函数sortByKey（）{
var textarea=document.getElementById（“输出”）；
textarea.value=textarea.value.split（“\n”）.sort（函数（a，b）{
如果（a！=“”&&b！=“”）{
返回a.split（'='）[0]。localeCompare（b.split（'='）[0]）
}否则{
返回0
}
}).加入（“\n”）；
}
document.getElementById（'sortbyvalue'）。onclick=sortbyvalue；
函数sortByValue（）{
var textarea=document.getElementById（“输出”）；
textarea.value=textarea.value.split（“\n”）.sort（函数（a，b）{
如果（a！=“”&&b！=“”）{
返回a.split（'='）[1]。localeCompare（b.split（'='）[1]）
}否则{
返回0
}
}).加入（“\n”）；
}
试验
键入文本

添加






名称/值对列表

按名称排序
按值排序
我建议使用数组。在这个方法中，您可以运行一个函数，在数组中存储“textbox”的值（然后清除字段）。例：

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

您可以使用类似以下代码：

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;
}
如果您使用
而不是
，并将您的值/名称对添加为
，将会更容易。希望能帮助你

谢谢Saleh，这项工作很好删除。但在我删除某些内容后，我无法将任何内容从textbox添加回textarea？你知道为什么吗？使用文本内容似乎是个问题。在此行中改用value属性：document.getElementById（'output'）.textContent+=nameValue+'\n'；将其更改为：document.getElementById（'output'）。value+=nameValue+'\n'；好极了，现在已经开始工作了。我还看到一个问题，当文本区域中只有一个
name=value
对时，delete对它们不起作用？有什么想法吗？这是因为“\n”字符。添加它是为了删除所选文本所在的行。要解决此问题，您可以在第一次替换后的deleteText函数末尾插入此行：textComponent.value=textComponent.value.replace（selectedText+'\n'，''）；textComponent.value=textComponent.value.replace（选择文本“”）；因此，在deleteText函数的末尾，您应该有3个替换项：textComponent.value=textComponent.value.replace（'\n'+selectedText'）；textComponent.value=textComponent.value.replace（选择文本+'\n'，''）；textComponent.value=textComponent.value.replace（选择文本“”）；看看 
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;
}