2

verán tengo algo como

<textarea name="x" id="x">

y me gustaría ponerle un boton que me genere el tag

<a></a>

He pensado en algo como

var final document.getElemtById('x').value+
"<a href='aqui introduzca el link'>Aqui la palabra a móstrar</a>".
2
  • @lois6b también me sorprendió, no pensé en renderizar la etiqueta con el innerHTML ya que por lo que se ve en la pregunta no lo iba a necesitar
    – Jorius
    el 24 mar. 2017 a las 12:40
  • @Jorius pensaba que el poner etiquetas <a> era para que se renderizaran como enlaces. Pero si quiere texto plano, el <a> despista xDD
    – lois6b
    el 24 mar. 2017 a las 12:41

2 respuestas 2

3

Puedes hacer lo siguiente

var textArea = document.getElementById('x');

function addTag(){
  var current_value = textArea.value;
  var new_tag = "<a href='aqui introduzca el link'>Aqui la palabra a móstrar</a>";
  textArea.value = current_value + ' ' + new_tag;
}
textarea{
  width: 100%;
  height: 150px;
}
<textarea name="x" id="x">
  Hola soy un textarea
</textarea><br />
<button onclick="addTag();">Add tag</button>

1
  • Hola, y como se implementaría en un formulário el 24 mar. 2017 a las 12:39
3

Con un textarea puedes añadir texto dentro pero no va a hacer render del HTML. Asi que te sugiero usar un div, con el atributo contenteditable=true:

Para hacer click en los elementos <a> de dentro, usé jQuery:

function addA() {

  var textarea = document.getElementById("divEditable");
  textarea.innerHTML += "<a href='https://www.google.es/'>Google</a><br>";

}


$('#divEditable').on('click', function(event) {
  if (event.target != this) {
    if(event.target.tagName == 'A')
      window.location = event.target.href;
  }
});
div.editable {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 5px;
  overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" class="editable" id="divEditable"><a href='https://www.google.es/'>Google</a><br><a href='http://stackoverflow.com/'>SOeng</a><br></div>


<input type="button" onclick="addA();" value="añadir">

5
  • Muchisimas gracias, funciona perfectamente. el 24 mar. 2017 a las 12:15
  • Pero no es lo que busco. Gracias de todos modos. el 24 mar. 2017 a las 12:39
  • Ah, pensaba que el poner etiquetas <a> era para que se renderizaran como enlaces. buscabas meramente el texto entonces?
    – lois6b
    el 24 mar. 2017 a las 12:40
  • Si, disculpa por la confusión. el 24 mar. 2017 a las 12:41
  • Nada, sin problemas. eso me pasa por presuponer ^^
    – lois6b
    el 24 mar. 2017 a las 12:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.