Jump to content

Couple Problems


pizzaguy
 Share

Recommended Posts

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, "\&#38;");			current_text = current_text.replace(/\"/g, "\&#34;");			current_text = current_text.replace(/\'/g, "\&#39;");			current_text = current_text.replace(/</g, "\&#60;");			current_text = current_text.replace(/>/g, "\&#62;");			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>

Edited by Pizzaguy
Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

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

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...