2009-03-14 12 views

risposta

51

Ecco come selezionare una porzione di una casella di testo (intervallo di selezione) e di ottenere il testo selezionato:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title> Test </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
    window.onload = function() { 
    var message = document.getElementById('message'); 
    // Select a portion of text 
    createSelection(message, 0, 5); 
    // get the selected portion of text 
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd); 
    alert(selectedText); 
    }; 

    function createSelection(field, start, end) { 
    if(field.createTextRange) { 
     var selRange = field.createTextRange(); 
     selRange.collapse(true); 
     selRange.moveStart('character', start); 
     selRange.moveEnd('character', end); 
     selRange.select(); 
     field.focus(); 
    } else if(field.setSelectionRange) { 
     field.focus(); 
     field.setSelectionRange(start, end); 
    } else if(typeof field.selectionStart != 'undefined') { 
     field.selectionStart = start; 
     field.selectionEnd = end; 
     field.focus(); 
    } 
    } 
</script> 
</head> 
<body> 
<input type="text" name="message" id="message" value="Hello World" /> 
</body> 
</html>

Demo

+1

Grazie MOLTO per questo !!! –

+4

** Ci sono 2 bug qui. ** 1. è necessario mettere a fuoco ** prima ** chiamando 'setSelectionRange' o non sarà selezionato nulla. 2. la 3a istruzione if dovrebbe essere 'else if (typeof field.selectionStart! = 'Undefined')' perché 'field.selectionStart' può valutare a 0 che è falsy – mkoryak

+2

[link a exmaple] (http: // jsbin. com/anadox/3/edit) – vsync

13

Piccolo correzione. Sembra che IE MoveEnd() il metodo si muove in modo incrementale in modo selRange.moveEnd('character', end) dovrebbe essere sostituito con selRange.moveEnd('character', end-start):

function createSelection(field, start, end) { 
    if(field.createTextRange) { 
     var selRange = field.createTextRange(); 
     selRange.collapse(true); 
     selRange.moveStart('character', start); 
     selRange.moveEnd('character', end-start); 
     selRange.select(); 
    } else if(field.setSelectionRange) { 
     field.setSelectionRange(start, end); 
    } else if(field.selectionStart) { 
     field.selectionStart = start; 
     field.selectionEnd = end; 
    } 
    field.focus(); 
} 
3

Grazie! Voglio condividere la mia funzione di ora, è utilizzato in Ajaxel CMS con Instant messenger

,wrapText:function(o, ot, ct) { 
    var s = o[0].selectionStart; 
    var e = o[0].selectionEnd; 
    o.val(o.val().substring(0, s)+ot+o.val().substring(s,e)+ct+o.val().substring(e, o.val().length)); 
    if (o[0].createTextRange){ 
     var sr = o[0].createTextRange(); 
     sr.collapse(true); 
     sr.moveStart('character', s); 
     sr.moveEnd('character',e-s+ot.length+ct.length); 
     sr.select(); 
    } 
    else if(o[0].setSelectionRange){ 
     o[0].setSelectionRange(s,e+ot.length+ct.length); 
    } 
    else if(o[0].selectionStart){ 
     o[0].selectionStart=s; 
     o[0].selectionEnd=e+ot.length+ct.length; 
    } 
} 
Problemi correlati