javascript - 在textarea中获取选中的文本

<分区>

我想将选定的文本存储在一个变量中，然后通过按一个按钮删除选定的文本。最好使用 jQuery，但我不介意基本的 JavaScript。

我已经尝试了指向将代码剥离到我需要的代码的示例，但我无法在单击按钮时让它工作。仅当我将#addchapter 更改为 textarea 时它才有效。我的代码有什么问题？

<html>

<head>
    <script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript" src="jquery-fieldselection.js"></script>
    <script type="text/javascript"><!--//--><![CDATA[//><!--

        $(document).ready(function(){

            $('#addchapter').click(update);
        });

        function update(e) {

            var range = $(this).getSelection();

            $('#output').html(
                "selected text:\n<span class=\"txt\">" + ((true) ? range.text.whitespace() : range.text) + "</span>\n\n"
            );
        }

        String.prototype.whitespace = (function() {

            if (!RegExp.escape) {
              RegExp.escape = (function() {
                var specials = [ '/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\' ];
                var sRE = new RegExp( '(\\' + specials.join('|\\') + ')', 'g' );
                return function(text) { return text.replace(sRE, '\\$1') }
              })();
            }

            var ws = { "\r\n": "¶", "\n": "¶", "\r": "¶", "\t": "&raquo;", " ": "&middot;" };

            return ($.browser.msie) ? function() {

                var s = this;
                $.each(ws, function(i){ s = s.replace(new RegExp(RegExp.escape(i), 'g'), this) });
                return s;
            } : function () {
                var s = this;
                $.each(ws, function(i){ s = s.replace(new RegExp(RegExp.escape(i), 'g'), this + "\u200b") });
                return s;
            }
        })();

        //--><!]]>

    </script>

</head>

<body>
    <pre id="output"></pre>

    <textarea id="area1" name="area1">textarea: foo bar baz</textarea>

    <input type="button" value="add" id="addchapter">
</body>

</html>

我最终使用了这个 - http://plugins.jquery.com/project/a-tools

最佳答案

这个问题看起来很清楚，但是代码却毫无关联，令人困惑，所以我将在没有代码的情况下按照我的理解来回答这个问题。

deleteSelectedText()函数将从 <textarea> 中删除选定的文本或 <input type="text">您提供并返回已删除的文本。

function getSelectionBoundary(el, start) {
    var property = start ? "selectionStart" : "selectionEnd";
    var originalValue, textInputRange, precedingRange, pos, bookmark, isAtEnd;

    if (typeof el[property] == "number") {
        return el[property];
    } else if (document.selection && document.selection.createRange) {
        el.focus();

        var range = document.selection.createRange();
        if (range) {
            // Collapse the selected range if the selection is not a caret
            if (document.selection.type == "Text") {
                range.collapse(!!start);
            }

            originalValue = el.value;
            textInputRange = el.createTextRange();
            precedingRange = el.createTextRange();
            pos = 0;

            bookmark = range.getBookmark();
            textInputRange.moveToBookmark(bookmark);

            if (/[\r\n]/.test(originalValue)) {
                // Trickier case where input value contains line breaks

                // Test whether the selection range is at the end of the
                // text input by moving it on by one character and
                // checking if it's still within the text input.
                try {
                    range.move("character", 1);
                    isAtEnd = (range.parentElement() != el);
                } catch (ex) {
                    log.warn("Error moving range", ex);
                    isAtEnd = true;
                }
                range.moveToBookmark(bookmark);

                if (isAtEnd) {
                    pos = originalValue.length;
                } else {
                    // Insert a character in the text input range and use
                    // that as a marker
                    textInputRange.text = " ";
                    precedingRange.setEndPoint("EndToStart", textInputRange);
                    pos = precedingRange.text.length - 1;

                    // Delete the inserted character
                    textInputRange.moveStart("character", -1);
                    textInputRange.text = "";
                }
            } else {
                // Easier case where input value contains no line breaks
                precedingRange.setEndPoint("EndToStart", textInputRange);
                pos = precedingRange.text.length;
            }
            return pos;
        }
    }
    return 0;
}

function deleteSelectedText(el) {
    var start = getSelectionBoundary(el, true);
    var end = getSelectionBoundary(el, false);
    var val = el.value;
    var selectedText = val.slice(start, end);
    el.value = val.slice(0, start) + val.slice(end);
    return selectedText;
}

关于javascript - 在textarea中获取选中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3221246/

上一篇：javascript - 这个说法有什么问题吗？ (JavaScript)

下一篇：javascript - 是否有任何 javascript 函数，甚至在 jQuery 库中与 PHP print_r() 功能相同？

相关文章：

javascript - 消除某个 javascript 方法的所有实例的抖动

javascript - 如何使用 jquery Highcharts 在饼图中显示值而不是百分比

javascript - 使用 JavaScript 或 MVC Razor 返回页面

javascript - 为什么这不是按照我期望的方式添加类(class)？

javascript - 编辑后删除 CKEditor 实例

Internet Explorer 8 中的 JQuery 委托(delegate)不起作用

javascript - 查询 |如何从选择的html元素中获取选定的项目

jquery - 如何检索 JQuery 数据表的排序状态

javascript - 如何从 XMLHttpRequest 获取元素

javascript - 为什么当我尝试创建第二个 map 实例时，Google Maps JavaScript API v3 无法正常工作？