2009-03-14 24 views
37

¿Cómo puedo seleccionar programáticamente un rango específico de texto en un campo HTML input? (No deseo seleccionar el campo completo , solo un subconjunto)Programando texto parcialmente parcial en un campo de entrada

Además, ¿cómo puedo determinar el rango seleccionado actualmente en un campo?

+0

Tiene que explicar un poco más sobre lo que está tratando de hacer. – cgreeno

+0

Oh, desea seleccionar Caracteres individuales. :/ –

Respuesta

51

Aquí es cómo seleccionar una parte de un cuadro de texto (selección del rango) y obtener el texto seleccionado:

<!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

¡Muchas gracias por este! –

+4

** Hay 2 errores aquí. ** 1. necesita enfocar ** antes ** de llamar a 'setSelectionRange' o no se seleccionará nada. 2. la tercera instrucción if debe ser 'else if (typeof field.selectionStart! = 'Undefined')' porque 'field.selectionStart' puede evaluar a 0, que es falso – mkoryak

+2

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

13

pequeña corrección. Parece que el IE MoveEnd() método se mueve de forma incremental por lo selRange.moveEnd('character', end) debe sustituirse por 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

Gracias! Quiero compartir mi función ahora, se usa en Ajaxel CMS junto 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; 
    } 
} 
Cuestiones relacionadas