JQ实现单击或双击实现文本变为可编辑状态,焦点移除变为文本
需求:有一段文本,当单击或者双击文本的时候,文本需要变为可编辑的状态,自行编辑结束后,鼠标点击外边,也就是焦点移除,文本自动保存且变为文本的状态;
思路:写个触发事件,获取文本的值,将文本的html替换成输入框,输入框的value值就是获取的文本值,写个blur触发事件,进行ajax后台数据提交,成功后将输入框的html替换成文本值;
代码:
<span id="span_text">我是文本值</span>
<script type="text/javascript">
$(document).ready(function(){
// dblclick是双击事件,单击事件是onclick
$("#span_text") .dblclick(function(){
var span_str = $(this);
var span_text = span_str.text();
var input_str = $('<input type="text" value="'+span_text+'" />');
span_str.html(input_str);
input_str.blur(function(){
var input_val = $(this).val();
$.post("text_save.php",{
span_text:input_val},function(data){
if(data.code == '200'){
span_str.html(input_val);
}
},'json');
});
})
})
</script>