replace any html tag to input using javascript onclick

Question

I'm trying to replace html tags to input with javascript If the tag is pressed it turns to input

Example:

<a href="#">text</a>

replace to:

<input value="text" />

or:

<h2 href="#">text</h2>

replace to:

<input value="text" />

This is the code :

/**
  We're defining the event on the `body` element, 
  because we know the `body` is not going away.
  Second argument makes sure the callback only fires when 
  the `click` event happens only on elements marked as `data-editable`
*/
$('body').on('click', '[data-editable]', function(){
  
  var $el = $(this);
              
  var $input = $('<input/>').val( $el.text() );
  $el.replaceWith( $input );
  
  var save = function(){
    var $p = $('<p data-editable />').text( $input.val() );
    $input.replaceWith( $p );
  };
  
  /**
    We're defining the callback with `one`, because we know that
    the element will be gone just after that, and we don't want 
    any callbacks leftovers take memory. 
    Next time `p` turns into `input` this single callback 
    will be applied again.
  */
  $input.one('blur', save).focus();
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p data-editable>First Element</p>
  
 <a data-editable class="navbar-brand" href="#page-top">Second Element</a>
<p>Not editable</p>

The problem is: my classes deleted and also not be a tag that has been created 'p' and not "a" or "h2" or whatever

What is the behavior that you trying to achieve? because you can toggle the data-editable attribute — Cuzi
– Cuzi, Commented Mar 26, 2017 at 20:18
I want to create a script to do: If the user presses the text, the text turns to 'input' @Cuzi — A. El-zahaby
– A. El-zahaby, Commented Mar 26, 2017 at 20:21
you could detach() the element from the DOM intact, and put the input in its place. Then re-attach it afterwards, simply changing the text. That way, all the classes, events etc etc of the element should be preserved. api.jquery.com/detach — ADyson
– ADyson, Commented Mar 26, 2017 at 20:27
I want to do this programmatically ,, because the number of tags that may be too many change @ADyson link — A. El-zahaby
– A. El-zahaby, Commented Mar 26, 2017 at 20:31

Cuzi · Accepted Answer · 2017-03-26 20:57:43Z

2

You want to make the same tag that it was right?

if understood well that will work:

$('body').on('click', '[data-editable]', function(){
  
  var $el = $(this);
              
  var $input = $('<input/>').val( $el.text() );
  $el.replaceWith( $input );
  $input.focus();
  var save = function(){
    $el.text($input.val());
    $input.replaceWith( $el );
  };
  
  $input.one('blur', save);
  
});

.how { color: red}
.green { color: lime}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="how" data-editable>First Element</p>
  
 
<a href="#" data-editable>Second Element</a>
<h2 class="green" data-editable>Second Element</h2>

<p>Not editable</p>

edited Mar 26, 2017 at 20:57

answered Mar 26, 2017 at 20:50

Cuzi

1,02611 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antonio Smoljan · Accepted Answer · 2017-03-26 20:45:57Z

1

If i understood correctly what you are after, check this out

Example

Code:

$("body").on("click","[data-editable]", function() {
  var $el = $(this);
  var $input = $("<input/>").val($el.text()).addClass($el.attr('class')).data("tagName", this.outerHTML);
  $el.replaceWith($input);
  console.log($input.data()["tagName"]);
   var save = function(){
    var $p = $($input.data()["tagName"]).text( $input.val() ).addClass($input.attr("class"));
    $input.replaceWith( $p );
  };

  $input.one('blur', save).focus();
})

I've just saved the clicked elements classes and html so when we recreate it it comes out as the previous element instead of a static p tag.

answered Mar 26, 2017 at 20:45

Antonio Smoljan

2,2071 gold badge15 silver badges11 bronze badges

2 Comments

ADyson Over a year ago

what about preserving other aspects, e.g. events, other attributes, jQuery data, etc etc which might be associated with an element?

Antonio Smoljan Over a year ago

This just saves what he asked for it's probably pretty bad if we wanted to save events and other stuff, so it's basically just a 'hacky' answer to his question.

Collectives™ on Stack Overflow

replace any html tag to input using javascript onclick

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related