Edit Text in html

Question

Edit Text in html

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I need to know if there is any way to enable a text tag to be edited in html with jquery

For example, I have a p-label that is shown as plain text in html but I want that when I press a button it is enabled as if it were a textarea and it can be edited. at the end it is again a plain text element in html.

Thank you.

javascript jquery html

asked by Max Fuentes 10.08.2018 в 18:11

source

4 answers

How do I make a variable of the same type of class in Javascript? In the overload of, it says that there is an initializer error before &

score 2 · Answer 1

With the contented attribute you can get that:

Source : developer.mozilla

$(function(){
  $('#btnEditable').on('click', function(){
    var esEditable = $('#idTexto').attr('contenteditable');
    if(esEditable){
      $('#idTexto').attr('contenteditable', false);
      $('#btnEditable').html('Hacerlo Editable');
    }else{
      $('#idTexto').attr('contenteditable', true);
      $('#btnEditable').html('dejar der editar');
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="idTexto">Este contenido se volverá editable</div>
<button id="btnEditable">Hacerlo Editable</button>

score 0 · Answer 2

0

For example, a text within the p

tags

<p>Ejemplo</p>

You can modify it with jQuery like this:

$('p').html('Edición');

answered by 10.08.2018 в 18:18

score 0 · Answer 3

Almost any tag can be modified with jQuery.

here the html

//el input esta solo lectura actualmente 
    <input  size="30" id="mi_input" type="text" value="Descripcion" readonly>
//boton con su id
    <button type='submit'id='id_boton' class='btn btn-warning '>Boton Editar</button>

here the js

$("#id_boton").click(function(){
    //remueves el atributo de solo leer
  $('#mi_input').removeAttr('readonly');

}

I hope you serve bro ... ReNiceCode ...

score 0 · Answer 4

What you're looking for is the contenteditable attribute that some HTML elements have so that the user can edit their internal content.

Have you seen editors of certain sites that allow you to format the text when you are writing? Some of them use this property. If you can not locate them, the new version of Reddit has one of them when you want to add a new comment, to say an example.

Its use is very simple, and according to the Mozilla Developers Network documentation You must always specify a value for that attribute. I'll explain:

This tag will allow you to insert content within it.

<p contenteditable="true"></p>

This tag will be displayed as a paragraph in your document.

<p contenteditable="false"></p>

But never do this:

<p contenteditable=""></p>
<p contenteditable></p>

For the integration with Javascript and jQuery, I can think of something quick like the following:

let bandera = true; // La bandera cambia su valor entre verdadero y falso cada vez que el usuario hace clic sobre el botón
let funcion = function(evento){
  evento.preventDefault(); // Cuando invocamos esta función, le decimos al navegador que no ejecute la acción por defecto de dicho botón y en su lugar proceda con las instrucciones que le damos aquí abajo
  jQuery('p').attr('contenteditable', bandera);
  bandera = !bandera; // Simplemente intercambiamos su valor anterior
}
jQuery(document).on('click', 'button', funcion);

If you need to do something more complex, consider using some existing libraries like Trumbowyg .