用javascript实现div可编辑的常见方法
功能:实现网页内容的即时编辑,增加页面的可用性、交互性。
方法1:直接通过textarea标签实现,请运行下边代码:
New Document
#info {
font-size: 12px;
overflow:hidden;
background-color: #ffffcc;
color: black;
padding-right:5px;
padding-left:5px;
font-family: courier;
width:100%;
letter-spacing:0;
line-height:12px;
border-style:none;
}
function saveInfo() {
var text = document.getElementById("info").value;
//再用ajax向数据库中更新当前修改内容
}
function setCols() {
var textarea = document.getElementById("info");
textarea.setAttribute("cols", Math.floor(textarea.clientWidth / 7));
setRows();
}
function setRows() {
var textarea = document.getElementById("info");
var cols = textarea.cols;
var str = textarea.value;
str = str.replace(/\r\n?/, "\n");
var lines = 2;
var chars = 0;
for (i = 0; i
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
思路:将textarea通过CSS样式设计成让用户感觉不像是textarea的样子,通过onblur、oumouseout等属性进行ajax保存用户数据。
方法二:通过document.createElement的方法向页面增加input来实现。请运行下边代码:
New Document
点击这里就可以编辑
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
思路:
1、当用户鼠标经过可编辑区域时,用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时,也就是onclick事件时,先将原来的内容清掉,将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后,点击“保存”按扭时通过ajax向数据库中写入新的数据。
PS:第二个方法的代码还有点问题,有空再来调试一下。