pizzaguy Posted August 30, 2009 Share Posted August 30, 2009 Ok, i've tried everything I can think of and I can't seem to get these working.My first problem is that I can't seem to be able to replace the characters &,",',<, and > with their respective entities. My second problem is this: when the div element is clicked the innerHTML is changed and the onclick event is removed, and when focus is blurred the onclick event should be added, but it doesn't and I can't figure out why. here is my code: <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> function singleInputInit(obj){ var current_text = obj.innerHTML; obj.innerHTML = "<input type=\"text\" value=\"" + current_text + "\" onblur=\"singleInputWrite(this)\"></input>"; obj.firstChild.focus(); obj.firstChild.select(); obj.onclick = ""; } function singleInputWrite(obj){ var current_text = obj.value; var parent = obj.parentNode; parent.onclick = "singleInputInit(this)"; current_text = current_text.replace(/&/g, "\&"); current_text = current_text.replace(/\"/g, "\""); current_text = current_text.replace(/\'/g, "\'"); current_text = current_text.replace(/</g, "\<"); current_text = current_text.replace(/>/g, "\>"); parent.innerHTML = current_text; } </script> </head> <body> <div id="container"> <div id="info-l1"> <div class="info-container"> <div class="info-label">Name: </div><div class="single-input large" onclick="singleInputInit(this)"></div> </div> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
pizzaguy Posted August 30, 2009 Author Share Posted August 30, 2009 Ok, I managed to fix the onclick things, by making it use variables instead of changing the onclick value, but I still cant figure out why the replace isn't working... Link to comment Share on other sites More sharing options...
dsonesuk Posted August 30, 2009 Share Posted August 30, 2009 don't know exactly what you trying to achieve with this? but the reason it wont convert is because there's no innerHTML content to convert, it's empty <div class="single-input large" onclick="singleInputInit(this)">(empty-null-void-vacant-basically nothing to convert)</div> if it had something like this:<div class="single-input large" onclick="singleInputInit(this)"><<<<<<<<<<<&>>>>>>>>>>></div>it would create a input box within this containing div, with this innerHTML text selected. when losing focus (onblur) it takes the content value in the input box, converts it, and then overwrites the input box with the converted text ONLY. <div class="single-input large" onclick="singleInputInit(this)"><<<<<<<<<<<&>>>>>>>>>>></div> Link to comment Share on other sites More sharing options...
pizzaguy Posted August 31, 2009 Author Share Posted August 31, 2009 What I'm doing is this: The when you click on the div, the singleInputInit is triggered and an input box is placed in the div. When you are done typing in the input box and you click somewhere else, the div is blurred causing singleInputWrite to take the text from the input box and make that the content of the div. <div></div>-div is clicked-<div><input value="bla"></input></div>-input is blurred-<div>bla</div> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 31, 2009 Share Posted August 31, 2009 i've managed to create this, but with two options available (comment out code below options listed to tryout)option 1 keep input box displayedoption 2 remove input box, and only show if current text clicked<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">/*<![CDATA[*//*---->*/ function singleInputInit(obj){ obj.innerHTML = "<input type=\"text\" value=\"\" onblur=\"singleInputWrite(this)\">"+previous_current_text; obj.firstChild.focus(); obj.firstChild.select(); }var previous_current_text="";function singleInputWrite(obj) { var current_text = obj.value; var parent = obj.parentNode; current_text = current_text.replace(/&/g, "&"); current_text = current_text.replace(/\"/g, """); current_text = current_text.replace(/\'/g, "'"); current_text = current_text.replace(/</g, "<"); current_text = current_text.replace(/>/g, ">"); previous_current_text+= (" ")+current_text; alert(current_text) //option 1 keep input box displayed parent.innerHTML = "<input type=\"text\" value=\"\" onblur=\"singleInputWrite(this)\"></input>"+previous_current_text; //option 2 remove input box, and only show if current text clicked //parent.innerHTML = previous_current_text; //obj.onclick = "singleInputInit(this)"; }/*--*//*]]>*/</script> </head> <body> <div id="container"> <div id="info-l1"> <div class="info-container"> <div class="info-label">Name: <div class="single-input large" onclick="singleInputInit(this)">Show Input</div></div> </div> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.