1

this should be simple but I can't figure it out.

I want to let user edit a value. To do so, upon click, the value changes into a textbox. However, if the user puts a quote mark in the user input within the text box the value="" attribute of the text box closes prematurely and the quote mark and anything after it gets lost. Escape (deprecated) and encodeURI merely replace the quote mark with asci does which don't look good in the textbox.

Would appreciate anyone's solution to this problem:

Here is javascript:

function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="'+text+'"><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext
return false;
}

html:

Text: <span id="text" onclick="editText()";>He said "that's cool"</span>

jsfiddle

http://jsfiddle.net/2s9v2/6/

UPDATE:

Contrary to what those who marked this as a duplicate say, the duplicate question does not provide an answer to my question. They might want to re-read my question and the so-called duplicate and mentally register the word "programmatic" in my question and actually look at the code in the duplicate relaive to the code here.... Just saying.

I ended up changing the textbox to a textarea as a workaround as there does not seem to be a straightfoward way to programmatically escape a quote within a textbox.

The answer from Merlin below is a possible approach but calling the second function is more complex than just replacing textbox with textarea. In any case, I could not get that to work but I thank Merlin for his answer and upvoted it.

Improve this question
3
  • 1
    Just don't use .innerHTML, but something appropriate… Commented May 13, 2014 at 0:29
  • You can use string replacement to add ` \ ` to every " but constructing HTML out of user input directly is generally a bad idea, for security reasons. Commented May 13, 2014 at 0:36
  • @Bergi tried .textContent and same problem. .value is undefined. What would you suggest? Commented May 13, 2014 at 0:55

2 Answers 2

Reset to default
2

Try: text.replace(/"/g,"&quot;")

Ideally, though, you should be creating the elements with createElement, at which point you can do elem.value = text with no need for escaping.

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

2 Comments

I think this will show &quot; in the input box...
@user1904273 It works for me. Demo
2

Why not just set the value directly instead of rebuilding the input?

document.getElementById('name').value = edittext

Of course, this assumes that the input element with id=name already exists in your DOM, but I see no particular reason you could not ensure that it is already there (either writing directly in HTML or generating in Javascript on page load).

Update: It seems that the OP wants the element to be dynamically created in the onClick, by turning the text that is currently in a div into an input field with the contents of that div as its value.

I believe the following might do the trick, assuming id is unique as it should be.

function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext;
document.getElementById('name').value = text;
document.getElementById('text').onclick = function() {}; //
return false;
}

Note that you will need to disable the onClick inside the above function as well, and then re-enable it inside storeText, because otherwise every click will cause extra buttons to be added.

Update 2: Here is a fully working example without parameter passing (for simplicity).

<html>
<body>
<script>
function editText() {
    var text = document.getElementById('text').innerHTML;
    var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText();">';
    document.getElementById('text').innerHTML = edittext;
    document.getElementById('name').value = text;
    document.getElementById('text').onclick = function() {}; 
    return false;
}
function storeText() {
    document.getElementById('text').innerHTML = document.getElementById('name').value;
    document.getElementById('text').onclick = "editText();";
}
</script>
<div id="text" onclick="editText();">HelloWorld</div>
</body>
</html>
Improve this answer

7 Comments

First, the user clicks on the value to expose the input box for editing. The error occurs when the value that displays in the edit box is not the same as the value. Where would you add this line?
@user1904273, You will need to give a more complete example to demonstrate the problem. It sounds like you are creating the input element on the fly and replacing some other element. If that is the case, then you can still create the element first and then use the solution I present.
@user1904273, I think I understand, and I updated the answer. Let me know if that is what you intended.
I guess there is no way to escape the quote mark somehow. You are right that this is abbreviated code. This function does multiple duty for a whole page where fields can be edited upon clicking (in the full blown version it takes the name of the field as an input). So I am trying to keep it as simple as possible.... Added jsfiddle to illustrate problem in simplest form.
@user1904273, You can use string replacement to add ` \ ` to every " but constructing HTML out of user input is generally a bad idea.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.