本文和大家重点讨论一下用Javascript实现div可编辑的常见方法，这里主要有两种，希望本文的介绍对你的学习有所帮助。
用Javascript实现div可编辑的常见方法
功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
◆方法一：直接通过textarea标签实现，请运行下边代码：
- >
- <HTML>
- <HEAD>
- <TITLE>NewDocumentTITLE>
- <METANAMEMETANAME="Generator"CONTENT="EditPlus">
- <METANAMEMETANAME="Author"CONTENT="">
- <METANAMEMETANAME="Keywords"CONTENT="">
- <METANAMEMETANAME="Description"CONTENT="">
- <styletypestyletype="text/css">
- #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;
- }
- style>
- HEAD>
- <BODY>
- <dividdivid="sdf"style="width:400px;">
- <textareaidtextareaid="info"onblur="saveInfo()"onmouseout="saveInfo()"
- onkeyup="setRows()">textarea>
- div>
- <scriptlanguagescriptlanguage="JavaScript">
- functionsaveInfo(){
- vartext=document.getElementById("info").value;
- //再用ajax向数据库中更新当前修改内容
- }
- functionsetCols(){
- vartextarea=document.getElementById("info");
- textarea.setAttribute("cols",Math.floor(textarea.clientWidth/7));
- setRows();
- }
- functionsetRows(){
- vartextarea=document.getElementById("info");
- varcols=textarea.cols;
- varstr=textarea.value;
- strstr=str.replace(/\r\n?/,"\n");
- varlines=2;
- varchars=0;
- for(i=0;i<str.length;i++){
- varc=str.charAt(i);
- chars++;
- if(c=="\n"||chars==cols){
- lines++;
- chars=0;
- }
- }
- textarea.setAttribute("rows",lines);
- textarea.style.height=lines*12+"px";
- }
- functionsetDefault(){
- vartextarea=document.getElementById("info");
- textarea.value="单击这里进行编辑";
- }
- setDefault();
- setCols();
- script>
- BODY>
- HTML>
[Ctrl+A全选注:如需引入外部Js需刷新才能执行]
思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。
发表评论共有0访客发表了评论
暂无评论，快来抢沙发吧！