validacion - Cómo obtener texto seleccionado del control de cuadro de texto con javascript
validar formulario javascript html5 (5)
Tengo un cuadro de texto y un botón de enlace. Cuando escribo un texto, selecciono algunos y luego hago clic en el botón de enlace, el texto seleccionado en el cuadro de texto debe mostrarse con un cuadro de mensaje.
¿Cómo puedo hacerlo?
Cuando hago clic en el botón Enviar para el cuadro de texto a continuación, el cuadro de mensaje debe mostrar Lorem ipsum. Porque "Lorem ipsum" está seleccionado en el área.
Si selecciono cualquier texto de la página y hago clic en el botón de enviar, funciona, pero si escribo un texto en el cuadro de texto y lo hago, no es así. Porque cuando hago clic en otro espacio, la selección del cuadro de texto se cancela.
Ahora el problema es que, cuando selecciono un texto del cuadro de texto y hago clic en cualquier otro control o espacio, el texto que se selecciona debe estar todavía seleccionado.
¿Cómo se hace?
Aquí hay una solución mucho más simple, basada en el hecho de que la selección de texto ocurre en mouseup, entonces agregamos un detector de eventos para eso:
document.querySelector(''textarea'').addEventListener(''mouseup'', function () {
window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
// window.getSelection().toString();
});
<textarea>
Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>
Esto funciona en todos los navegadores.
Si también desea manejar la selección a través del teclado, agregue otro detector de eventos para keyup , con el mismo código.
Si no fuera por este error de Firefox archivado en 2001 (sí, hace 14 años), podríamos reemplazar el valor asignado a window.mySelection con window.getSelection().toString() , que funciona en IE9 + y todos los navegadores modernos , y también obtiene la selección hecha en partes no textarea del DOM.
Gran fan de jQuery-textrange
Debajo hay un ejemplo muy pequeño, autónomo. Descargue jquery-textrange.js y cópielo en la misma carpeta.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-textrange</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-textrange.js"></script>
<script>
/* run on document load **/
$(document).ready(function() {
/* run on any change of ''textarea'' **/
$(''#textareaId'').bind(''updateInfo keyup mousedown mousemove mouseup'', function() {
/* The magic is on this line **/
var range = $(this).textrange();
/* Stuff into selectedId. I wanted to store this is a input field so it can be submitted in a form. **/
$(''#selectedId'').val(range.text);
});
});
</script>
</head>
<body>
The smallest example possible using
<a href="https://github.com/dwieeb/jquery-textrange">
jquery-textrange
</a><br/>
<textarea id="textareaId" >Some random content.</textarea><br/>
<input type="text" id="selectedId" ></input>
</body>
</html>
OK, aquí está el código que tengo:
function ShowSelection()
{
var textComponent = document.getElementById(''Editor'');
var selectedText;
if (textComponent.selectionStart !== undefined)
{// Standards Compliant Version
var startPos = textComponent.selectionStart;
var endPos = textComponent.selectionEnd;
selectedText = textComponent.value.substring(startPos, endPos);
}
else if (document.selection !== undefined)
{// IE Version
textComponent.focus();
var sel = document.selection.createRange();
selectedText = sel.text;
}
alert("You selected: " + selectedText);
}
Problema, aunque el código que doy para IE se da en muchos sitios, no puedo hacer que funcione en mi copia de IE6 en mi sistema actual. Tal vez funcione para usted, es por eso que lo doy.
El truco que buscas es probablemente el llamado .focus (), para devolver al área de texto el foco, de modo que la selección se vuelva a activar.
[ACTUALIZAR] Obtuve el resultado correcto (el contenido de la selección) con el evento onKeyDown:
document.onkeydown = function (e) { ShowSelection(); }
Entonces el código es correcto. Una vez más, el problema es obtener la selección al hacer clic en un botón ... Continúo buscando.
[ACTUALIZAR] No tuve éxito con un botón dibujado con una etiqueta li , porque cuando hacemos clic en él, IE deselecciona la selección anterior. El código anterior funciona con un botón de input simple, aunque ...
Para Opera, Firefox y Safari, puede usar la siguiente función:
function getTextFieldSelection(textField) {
return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}
Luego, solo pasa una referencia a un elemento de campo de texto (como un elemento de texto o de entrada) a la función:
alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));
O bien, si desea que <textarea> y <input> tengan una función getSelection () propia:
HTMLTextAreaElement.prototype.getSelection = HTMLInputElement.prototype.getSelection = function() {
var ss = this.selectionStart;
var se = this.selectionEnd;
if (typeof ss === "number" && typeof se === "number") {
return this.value.substring(this.selectionStart, this.selectionEnd);
}
return "";
};
Entonces, simplemente lo harías:
alert(document.getElementsByTagName("textarea")[0].getSelection());
alert(document.getElementsByTagName("input")[0].getSelection());
por ejemplo.
function disp() {
var text = document.getElementById("text");
var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
alert(t);
}
<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />