2

I have <p>a certain text</p> I want by onClick to changes this into a <input value="certain text">, so it can be edited.

All the solutions I found were clicking on a button. I want the text hides and the input-field appears instead.

Jack Kral
  • 139
  • 2
  • 10
  • 1
    https://stackoverflow.com/questions/6242976/javascript-hide-show-element – Jaybird Jan 01 '19 at 17:47
  • Well, probably handling the `click` event and then hiding the `div` and showing the `input`, I guess? – Uwe Keim Jan 01 '19 at 17:47
  • Do you want to preserve the original text between the

    tags and add it as the initial value of the input, or just want to have an input tag with an empty string as the initial value?

     – Ray Chan Jan 01 '19 at 17:47
  • 1
    Possible duplicate of [JavaScript hide/show element](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) – Uwe Keim Jan 01 '19 at 17:47
  • Instead of a button why can't you assign an onclick function to the

    itself?

     – Tony Thomas Jan 01 '19 at 17:51
  • The possible value of the button to edit is that it will be clear to the user what he is doing; Assuming your application is to place this in the wild on a web page with users not familiar with the application. Clearly, if this is back office the fewer keystrokes for the operators the better. – Wayne Jan 01 '19 at 18:51
  • On Stack Overflow, you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a **[Minimal, Complete, and Verifiable example](//stackoverflow.com/help/mcve)** within the question itself. – Rob Jan 02 '19 at 02:27

4 Answers4

3

function makeInput(e) {
   e.innerHTML = '<input value="'+e.innerText+'">';
}
<p onclick="makeInput(this)">a certain value</p>

A possible alternative is to just make the content of the p tag editable and use javascript to submit the information without using a input tag.

<p contenteditable="true">This is an editable paragraph.</p>
Wayne
  • 4,760
  • 1
  • 24
  • 24
2

Click to Edit, click away when done editing.

HTML:

<div class="editable">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Nullam dapibus porttitor sem, et tristique neque vehicula eu. 
   Nulla porta ex semper sapien luctus bibendum. Donec et congue nisi
</div>

CSS:

textarea {
  width: 100%;
  max-width: 400px;
  padding: 10px 20px;
  min-height: 120px
}

JS:

var eventHandler = function(e){e.preventDefault(); editDiv(this);};
document.querySelector('.editable').addEventListener("click", eventHandler);

function editDiv(div){
  var text = div.innerText,
      textarea = document.createElement("TEXTAREA");
  textarea.value = text;

  div.innerHTML = "";
  div.append(textarea);
    textarea.focus();
  textarea.addEventListener("focusout", function(e){
    finishEditDiv(div);
  });

  div.removeEventListener("click", eventHandler);

}

function finishEditDiv(div){
  //handle your data saving here
  var text = div.querySelector('textarea').value;
  div.innerHTML = text;
  document.querySelector('.editable').addEventListener("click", eventHandler);
}
Kubwimana Adrien
  • 2,463
  • 2
  • 8
  • 11
1

Assign the onClickto the p tag.

Create an hidden input.

On click hide the current p, and get the input associated to that p, then display it. 

function onClick(e) {
  e.currentTarget.style.display = 'none';
  document.querySelector('#p-input').style.display = 'block';
}
<section>
  <p onClick="onClick(event)">Clickable text</p>
  <input id="p-input" style="display:none;" type="text" />
</section>
quirimmo
  • 9,800
  • 3
  • 30
  • 45
0

You may use input element only. Use a disabled input with a styling of your choice ( grayish background for example ). Use onClick event to set the input to active and change its style ( no background ).

Worked pretty good for me.

Kiper
  • 309
  • 3
  • 17