Tengo un formulario HTML con un campo en el que el usuario puede proporcionar texto. En ese texto, es posible que deseen incluir un enlace a otro sitio web entre el texto sin formato. Idealmente, cuando pegan una URL de otra fuente en el área de texto, se puede hacer clic en ella mientras la editan. ¿Existe una solución simple para implementar esta función sin usar herramientas externas como la sugerida en esta respuesta ?
Lo más cerca que he llegado es usando un <div>contenteditable="true"</div> y arrastrando hipervínculos al div. Desafortunadamente, cuando un div tiene anclas contenteditable="true" no se puede hacer clic, lo cual se abordó aquí manteniendo presionado el botón ctrl para configurar contenteditable="false" ; sin embargo, entonces perdemos la funcionalidad ctrl+v . Además, no estoy seguro de cómo podré enviar los datos si la etiqueta es <div> en lugar de <textarea> .
Cuando se usa <textarea> , el enlace se copia como texto sin formato y no es un enlace en el que se pueda hacer clic. Creo que los anclajes no están permitidos en un <textarea> .
No creo que <input type="url"> funcione porque el área de texto puede contener contenido que no es una URL.
Consulte el fragmento para ver mis intentos.
var content = document.getElementById('content'); document.addEventListener('keydown', function(event) { if (event.keyCode === 17) { // when ctrl is pressed content.contentEditable = false; // disable contentEditable } }, false); document.addEventListener('keyup', function(event) { if (event.keyCode === 17) { // when ctrl is released content.contentEditable = true; // reenable contentEditable } }, false); <textarea></textarea> <div id="content" contenteditable="true"></div> <input type="url">En lugar de hacer clic en Ctrl, puede agregar un botón para alternar Vista previa/Editar como:
var content = document.getElementById('content'); var previewButton = document.getElementById('previewButton'); previewButton.addEventListener('click', function(event) { if (event.target.value === "Preview") { // when btn is first clicked event.target.value = "Edit"; content.contentEditable = false; // disable contentEditable } else { event.target.value = "Preview"; content.contentEditable = true; // enablecontentEditable } }, false); <div id="content" contenteditable="true"></div> <input type="button" value="Preview" id="previewButton" />Al utilizar un observador de mutaciones que busca nuevos anclajes en el área de texto, este script establecerá contentEditable = false cuando el usuario pase el mouse sobre el anclaje y lo volverá a activar cuando desactive el mouse.
var target = document.getElementById('content'); var observer = new MutationObserver(function(mutations) { let mutation = mutations.pop(); if (mutation.type === 'childList') { let anchors = mutation.target.getElementsByTagName('a') for (let i = 0; i < anchors.length; i++) { let anchor = anchors[i] anchor.addEventListener('mouseover', function() { content.contentEditable = false; // disable contentEditable }); anchor.addEventListener('mouseleave', function() { content.contentEditable = true; // disable contentEditable // restor caret position somehow }); } } }); var config = { attributes: false, childList: true, characterData: false }; observer.observe(target, config); <div id="content" contenteditable="true"></div>No se restaura el signo de intercalación a su posición antes de cambiar contentEditable a falso, lo que reduce la facilidad de uso.
No estoy seguro de si el área de texto se puede enviar con el formulario cuando es un <div> en lugar de un <textarea> .