大写--文本区域中的文本选择

Upper case a selection of text in a textarea

本文关键字：文本 选择 区域 大写      更新时间：2023-09-26

当我尝试运行以下代码时，我得到了一个undefined is not a function错误：

$(document).ready(function() {
    $("#textarea").select(function() {
        var selection = window.getSelection();
        $("#upper").click(function() {
            // alert(selection);
            var upper = selection.toUpperCase();
            var text = $("#textarea").text();
            $("#textarea").html(text.replace(selection, upper));
        });
    }); 
});

我正在尝试从文本区域中选择文本，然后单击按钮使所选内容大写。以下是完整代码的JSFiddle。

getSelection返回一个对象。你需要给toString()打电话。

$(document).ready(function () {
    var selection;
    $("#textarea").select(function () {
        selection = window.getSelection().toString();
    });
    $("#upper").click(function () {
        if (selection) {
            var upper = selection.toUpperCase();
            var text = $("#textarea").text();
            $("#textarea").html(text.replace(selection, upper));
        }
    });
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/8syb2d8j/4/

注意：

  • 事件处理程序嵌套（通常是个坏主意）
  • 我添加了一个检查，以确保在尝试提高其大小之前有一个选择
  • 由于您高亮显示的文本可能不止一个，因此使用replace实际上不是一个好的解决方案。试着突出显示第二个i，看看我的意思。您应该使用选择对象的属性来计算所选字符串的确切部分

在浏览了可移植的解决方案后，我发现了jQuery TextRange插件，基于演示，它已经足够解决这个问题了。

相关文章：