pTutorial

New way to learn Programming

How to make text editable using jquery

JQuery Example

In this article we demonstrate, how to make any text editable using jquery with the help of live example.

JQuery Text Editable Example


<!DOCTYPE html>
<html>
<head>
<script src="http://freeonlinecompiler.ptutorial.com/
js/jquery.min.js"></script>
<script>
function uk(){
var t=$('#cm').text();
var srt='<input type="text" id="p" 
value="'+t+'" onblur="uk1()" name="uk">';	
$('#cm').html(srt);
 }
	
function uk1(){
var t=$('#p').val();
$('#cm').text(t);
$('#cm').show();
$('#p').hide();
alert(t);	
}

</script>
</head>
<body>
<div id="cm" ondblclick="uk()">Umar Khan</div>
<p>Click on above text and type anything</p>
<p>After that press tab key or click mouse else where</p>
</body>
</html>

Download

See Also


QUOTES OF THE DAY

Well-begun is half done.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER