Заглавное выделение текста в текстовом поле

Question

Я получаю 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.

Answer 1

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 plugin, который, основываясь на the demo более чем достаточно для этой проблемы.