javascript - type - Seleccionar texto programáticamente en UIWebView
wkwebview ios (3)
Esto parece ser un error en Mobile Safari. Cuando contentEditable to true en touchstart y lo establezco en falso en touchend funciona. Si quito esas líneas y actualizo aún funciona. Si cierro Mobile Safari, borro la memoria caché y luego vuelvo a abrir el documento con las líneas eliminadas, deja de funcionar nuevamente.
He actualizado el código siguiente con una versión de trabajo (aunque eliminé la pulsación larga para simplificar).
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function() {
var node,
range,
offset,
clientX,
clientY;
document.addEventListener("DOMContentLoaded", function() {
document.body.addEventListener("touchstart", function(event) {
var selection = window.getSelection();
selection.removeAllRanges();
clientX = event.touches[0].clientX;
clientY = event.touches[0].clientY;
range = document.caretRangeFromPoint(clientX, clientY);
node = range.startContainer;
offset = range.startOffset;
document.body.contentEditable = "true";
event.preventDefault();
});
document.body.addEventListener("touchmove", function(event) {
var selection = window.getSelection(),
range = document.caretRangeFromPoint(event.touches[0].clientX, event.touches[0].clientY),
newRange = document.createRange();
if(clientY < event.touches[0].clientY) {
newRange.setStart(node, offset);
newRange.setEnd(range.startContainer, range.startOffset);
}
else {
newRange.setStart(range.startContainer, range.startOffset);
newRange.setEnd(node, offset);
}
selection.removeAllRanges();
selection.addRange(newRange);
event.preventDefault();
});
document.body.addEventListener("touchend", function(event) {
document.body.contentEditable = "false";
event.preventDefault();
});
});
})();
</script>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus volutpat mauris sed porta. Phasellus euismod malesuada eleifend. Donec mattis, orci quis scelerisque mattis, turpis sem pulvinar nisi, et sagittis nunc nisi sed nulla. Pellentesque pharetra consequat neque, ultrices mattis mauris auctor id. Aenean tincidunt turpis non odio gravida semper. Praesent feugiat, lorem at lacinia tristique, orci eros tincidunt leo, at adipiscing sapien felis at tellus. Phasellus ac est nec nibh posuere euismod vel vitae neque. Vestibulum mollis adipiscing urna ut tristique. Vivamus purus tortor, venenatis id aliquam nec, elementum et lacus. Praesent elementum purus eget sapien ornare laoreet. Vestibulum ac odio enim.
</body>
</head>
</html>
Estoy haciendo esta pregunta después de 2 días de investigación. He leído todas las preguntas y respuestas relacionadas en stackoverflow y google (incluida this pregunta, que es muy similar pero sin respuesta) y aún no puedo encontrar una solución. Esperemos que alguien aquí pueda ayudar.
Tengo un UIWebView con algún texto cargado en él. Quiero seleccionar parte del texto mediante programación, como si el usuario lo hubiera presionado por mucho tiempo.
He intentado ejecutar este código javascript como respuesta a un clic:
function selectEl(x,y)
{
document.designMode = "on";
var el = document.elementFromPoint(x, y);
var range = document.createRange();
range.selectNodeContents(el);
var sel = document.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.designMode = "off";
}
Lo he intentado con y sin cambiar designMode a "off" al final de la función. Sé que este código "selecciona" el elemento correcto, porque si ejecuto este comando
document.execCommand("BackColor", false, "#ffffcc");
en realidad resalta el elemento en el que hice clic, pero no causa una selección del texto. ¿Alguna idea sobre cómo lograr esto?
Me encontré con esto:
hitElem.style.backgroundColor = "highlight";
hitElem.style.color = "highlighttext";
O, ESTE SITIO ha escrito algunos scripts HORRIBLES pero puede ayudarte :) Funciona con rangos.
Solo un pensamiento: asegúrate de que NO estés usando nada como esto en tu css:
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
Esto evita cualquier selección de texto.