使用JavaScript向文本区域添加文本

Question

使用JavaScript向文本区域添加文本

55

我怎样将一个文本列表追加到文本域中？

<textarea id="alltext"></textarea>

<ol>
    <li onclick="addText(Hello')">Hello</li>
    <li onclick="addText(World')">World</li>
    <li onclick="addText(Earthlings')">Earthlings</li>
</ol>

<script>
    var Alltext = "";
    function addText(text) {
        Alltext += text
    }
document.getElementById("alltext").value = Alltext;
</script>

这样做效率不高，因为列表实际上非常长。添加的文本正好是我在HTML中看到的值，所以没有必要重复输入两次，对吗？

有更好的方法吗？

- Emerson F

那么你是在寻找一种方法来添加文本，就像许多人已经回答的那样，还是在寻找一种在代码中构建列表而不是手动操作的方法？ - Ben Felda

系统已经有了这个答案。谢谢您的阅读时间！ - Emerson F

3个回答

9

试一试这个：

<!DOCTYPE html>
<html>
<head>
    <title>List Test</title>
    <style>
        li:hover {
            cursor: hand; cursor: pointer;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li").click(function(){
                $('#alltext').append($(this).text());
            });
        });
    </script>
</head>
<body>

    <h2>List items</h2>
    <ol>
        <li>Hello</li>
        <li>World</li>
        <li>Earthlings</li>
    </ol>
    <form>
        <textarea id="alltext"></textarea>
    </form>

</body>
</html>

- Carl

8

使用jQuery完成这个微小的任务会过度杀伤。 - the system

2

谢谢你的建议，Carl。但我宁愿不使用jQuery。无论如何，非常感谢你的时间！ - Emerson F

请添加更多信息。不鼓励仅有代码和“试试这个”的答案，因为它们没有可搜索的内容，并且没有解释为什么某人应该“试试这个”。 - abarisone

-3

尝试使用HTML值将文本添加到文本区域，但它不起作用。

值：

$(document).on('click', '.edit_targets_btn', function() {
            $('#add_edit_targets').modal('show');
            $('#add_edit_targets_form')[0].reset();
            $('#targets_modal_title').text('Doel bijwerken');
            $('#action').val('targets_update');
            $('#targets_submit_btn').val('Opslaan');

            $('#callcenter_targets_id').val($(this).attr("callcenter_targets_id"));
            $('#targets_title').val($(this).attr("title"));
            $("#targets_content").append($(this).attr("content"));

            tinymce.init({
                selector: '#targets_content',
                setup: function (editor) {
                    editor.on('change', function () {
                        tinymce.triggerSave();
                    });
                },
                browser_spellcheck : true,
                plugins: ['advlist autolink lists image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount', 'autoresize'],
                toolbar: 'undo redo | formatselect | ' + ' bold italic backcolor | alignleft aligncenter ' + ' alignright alignjustify | bullist numlist outdent indent |' + ' removeformat | image | help',
                relative_urls : false,
                remove_script_host : false,
                image_list: [<?php $stmt = $db->query('SELECT * FROM images WHERE users_id = ' . $get_user_users_id); foreach ($stmt as $row) { ?>{title: '<?=$row['name']?>', value: '<?=$imgurl?>/image_uploads/<?=$row['src']?>'},<?php } ?>],
                min_height: 250,
                branding: false
            });
        });

- user6095153

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- the system · Accepted Answer

将 onclick 赋值给 <ol> 以使用事件委托。然后将 event 对象作为参数传递，并使用它从单击的元素中获取文本。

function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("alltext").value += targ.textContent || targ.innerText;
}

<textarea id="alltext"></textarea>

<ol onclick="addText(event)">
  <li>Hello</li>
  <li>World</li>
  <li>Earthlings</li>
</ol>

请注意，在旧版IE和符合W3标准的系统中，通过传递 event 对象的方法都有效。