Mixing
How to change into by onclick
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.
javascript html
asked Jan 1 at 17:43
Jack KralJack Kral
35
|
show 2 more comments
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.
javascript html
asked Jan 1 at 17:43
Jack KralJack Kral
35
1
stackoverflow.com/questions/6242976/…
– Jaybird
Jan 1 at 17:47
Well, probably handling theclickevent and then hiding thedivand showing theinput, I guess?
– Uwe Keim
Jan 1 at 17:47
Do you want to preserve the original text between the <p> 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 1 at 17:47
1
Possible duplicate of JavaScript hide/show element
– Uwe Keim
Jan 1 at 17:47
Instead of a button why can't you assign an onclick function to the <p> itself?
– Tony Mathew
Jan 1 at 17:51
|
show 2 more comments
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.
javascript html
asked Jan 1 at 17:43
Jack KralJack Kral
35
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.
javascript html
javascript html
asked Jan 1 at 17:43
Jack KralJack Kral
35
asked Jan 1 at 17:43
Jack KralJack Kral
35
asked Jan 1 at 17:43
Jack KralJack Kral
35
asked Jan 1 at 17:43
Jack KralJack Kral
35
asked Jan 1 at 17:43
Jack KralJack Kral
35
35
1
stackoverflow.com/questions/6242976/…
– Jaybird
Jan 1 at 17:47
Well, probably handling theclickevent and then hiding thedivand showing theinput, I guess?
– Uwe Keim
Jan 1 at 17:47
Do you want to preserve the original text between the <p> 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 1 at 17:47
1
Possible duplicate of JavaScript hide/show element
– Uwe Keim
Jan 1 at 17:47
Instead of a button why can't you assign an onclick function to the <p> itself?
– Tony Mathew
Jan 1 at 17:51
|
show 2 more comments
1
stackoverflow.com/questions/6242976/…
– Jaybird
Jan 1 at 17:47
Well, probably handling theclickevent and then hiding thedivand showing theinput, I guess?
– Uwe Keim
Jan 1 at 17:47
Do you want to preserve the original text between the <p> 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 1 at 17:47
1
Possible duplicate of JavaScript hide/show element
– Uwe Keim
Jan 1 at 17:47
Instead of a button why can't you assign an onclick function to the <p> itself?
– Tony Mathew
Jan 1 at 17:51
1
1
stackoverflow.com/questions/6242976/…
– Jaybird
Jan 1 at 17:47
stackoverflow.com/questions/6242976/…
– Jaybird
Jan 1 at 17:47
Well, probably handling the
click event and then hiding the div and showing the input, I guess?– Uwe Keim
Jan 1 at 17:47
Well, probably handling the
click event and then hiding the div and showing the input, I guess?– Uwe Keim
Jan 1 at 17:47
Do you want to preserve the original text between the <p> 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 1 at 17:47
Do you want to preserve the original text between the <p> 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 1 at 17:47
1
1
Possible duplicate of JavaScript hide/show element
– Uwe Keim
Jan 1 at 17:47
Possible duplicate of JavaScript hide/show element
– Uwe Keim
Jan 1 at 17:47
Instead of a button why can't you assign an onclick function to the <p> itself?
– Tony Mathew
Jan 1 at 17:51
Instead of a button why can't you assign an onclick function to the <p> itself?
– Tony Mathew
Jan 1 at 17:51
|
show 2 more comments
4 Answers
4
active
oldest
votes
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>answered Jan 1 at 17:55
quirimmoquirimmo
7,66811334
add a comment |
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>answered Jan 1 at 18:15
WayneWayne
3,85311723
add a comment |
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.
answered Jan 1 at 18:03
KiperKiper
468
add a comment |
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);
}
answered Jan 1 at 18:26
Kubwimana AdrienKubwimana Adrien
36327
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997591%2fhow-to-change-div-into-input-by-onclick%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Jan 1 at 17:55
quirimmoquirimmo
7,66811334
add a comment |
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>answered Jan 1 at 17:55
quirimmoquirimmo
7,66811334
add a comment |
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>answered Jan 1 at 17:55
quirimmoquirimmo
7,66811334
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>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>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>answered Jan 1 at 17:55
quirimmoquirimmo
7,66811334
answered Jan 1 at 17:55
quirimmoquirimmo
7,66811334
answered Jan 1 at 17:55
quirimmoquirimmo
7,66811334
answered Jan 1 at 17:55
quirimmoquirimmo
7,66811334
7,66811334
add a comment |
add a comment |
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>answered Jan 1 at 18:15
WayneWayne
3,85311723
add a comment |
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>answered Jan 1 at 18:15
WayneWayne
3,85311723
add a comment |
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>answered Jan 1 at 18:15
WayneWayne
3,85311723
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>function makeInput(e) {
e.innerHTML = '<input value="'+e.innerText+'">';
}<p onclick="makeInput(this)">a certain value</p>function makeInput(e) {
e.innerHTML = '<input value="'+e.innerText+'">';
}<p onclick="makeInput(this)">a certain value</p><p contenteditable="true">This is an editable paragraph.</p><p contenteditable="true">This is an editable paragraph.</p>answered Jan 1 at 18:15
WayneWayne
3,85311723
edited Jan 1 at 18:25
answered Jan 1 at 18:15
WayneWayne
3,85311723
answered Jan 1 at 18:15
WayneWayne
3,85311723
answered Jan 1 at 18:15
WayneWayne
3,85311723
3,85311723
add a comment |
add a comment |
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.
answered Jan 1 at 18:03
KiperKiper
468
add a comment |
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.
answered Jan 1 at 18:03
KiperKiper
468
add a comment |
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.
answered Jan 1 at 18:03
KiperKiper
468
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.
answered Jan 1 at 18:03
KiperKiper
468
answered Jan 1 at 18:03
KiperKiper
468
answered Jan 1 at 18:03
KiperKiper
468
answered Jan 1 at 18:03
KiperKiper
468
468
add a comment |
add a comment |
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);
}
answered Jan 1 at 18:26
Kubwimana AdrienKubwimana Adrien
36327
add a comment |
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);
}
answered Jan 1 at 18:26
Kubwimana AdrienKubwimana Adrien
36327
add a comment |
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);
}
answered Jan 1 at 18:26
Kubwimana AdrienKubwimana Adrien
36327
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);
}
answered Jan 1 at 18:26
Kubwimana AdrienKubwimana Adrien
36327
answered Jan 1 at 18:26
Kubwimana AdrienKubwimana Adrien
36327
answered Jan 1 at 18:26
Kubwimana AdrienKubwimana Adrien
36327
answered Jan 1 at 18:26
Kubwimana AdrienKubwimana Adrien
36327
36327
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997591%2fhow-to-change-div-into-input-by-onclick%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
stackoverflow.com/questions/6242976/…
– Jaybird
Jan 1 at 17:47
Well, probably handling the
clickevent and then hiding thedivand showing theinput, I guess?– Uwe Keim
Jan 1 at 17:47
Do you want to preserve the original text between the <p> 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 1 at 17:47
1
Possible duplicate of JavaScript hide/show element
– Uwe Keim
Jan 1 at 17:47
Instead of a button why can't you assign an onclick function to the <p> itself?
– Tony Mathew
Jan 1 at 17:51