点击可以编辑

点击可以编辑,这个是很好的用户体验,到网上搜索了一下.

代码了几份好的代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 编辑 </ title >
< script  type ="text/javascript" >
var  curObj  =   null ;
function  showForm(obj){
   if  (curObj  ==   null ){
    curObj  =  obj;
    obj.innerHTML  =   " <textarea onblur="submitIt(this);"> "   +  obj.innerHTML  +   " </textarea> " ;
    obj.firstChild.select();
  }
}
function  submitIt(obj){
  curObj.innerHTML  =  obj.value;
  curObj  =   null ;
}
</ script >
< style >
div  {
  overflow :  auto ;
  padding : 5px ;
  border : 1px solid #FF6600 ;
  background-color : #FFFFCC ;
  width : 200px ;
  height : 160px ;
}
form  {
  margin :  0 ;
}
textarea  {
  border : 1px solid #999999 ;
  width :  190px ;
  height :  150px ;
}
</ style >
</ head >
< body >
< div  id ="editArea_1"  onclick ="showForm(this);" > Here is some  < strong > text </ strong > . </ div >
< br  />

< div  id ="editArea_2"  onclick ="showForm(this);" > Here is some text. < br  />
< br  />
Just so so... :D  </ div >
</ body >
</ html >

点击后出现要编辑

修改一下代码可以点击出现下拉框

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 编辑 </ title >
< script  type ="text/javascript" >
var  curObj  =   null ;
function  showForm(obj){
   if  (curObj  ==   null ){
    curObj  =  obj;
    obj.innerHTML  =   " <select id='ss' name='ss' onchange='submitIt(this);'><option value='1'>1</option><option value='2'>2</option></select> " ; 

  //    obj.firstChild.select();
  }
}
function  submitIt(obj)
{
    obj.innerHTML = " ss " ;

}
</ script >
< style >
div  {
  overflow :  auto ;
  padding : 5px ;
  border : 1px solid #FF6600 ;
  background-color : #FFFFCC ;
  width : 200px ;
  height : 160px ;
}
form  {
  margin :  0 ;
}
textarea  {
  border : 1px solid #999999 ;
  width :  190px ;
  height :  150px ;
}
</ style >
</ head >
< body >
< div  id ="editArea_1"  onclick ="showForm(this);" > Here is some  < strong > text </ strong > . </ div >
< br  />

< div  id ="editArea_2"  onclick ="showForm(this);" > Here is some text. < br  />
< br  />
Just so so... :D  </ div >
</ body >
</ html >

点击修改后出现下图:

 

2.  --------------------------------

还有一种文本框的

JS

     function  edit(objInput)
    {
        objInput.style.borderStyle  =   ' inset ' ;
//         objInput.readOnly = false;
//         objInput.focus();
    }
     function  exitEdit(objInput)
    {
        objInput.style.borderStyle  =   ' none ' ;
       //   obj.readOnly = true;
       //   obj.focus();
    }

 css

.editInput
{
    border-style : none ;
    border-width : 2px ;
}

 

 

在文本框里面

  < input  id ="taxSales"  type ="text"  class ="editInput"  onclick ="edit(this);"   onblur ="exitEdit(this);" />

 --------------------------------------

其实上面的方法有笨不太必要,还有一种方法可以实现,把文本框设置没有边框,当点击后调用一个可以显示边框的方法

如:onmouseover="onmouseoverChange(this);" onmouseout="onmouseoutChange(this);"

调用方法

/*    -----------------------  */
     function  onmouseoverChange(obj)
    {
        obj.style.borderColor = " #FF6600 " ;
        obj.style.borderWidth = " 1px " ;
        obj.style.backgroundColor = " FFFFCC " ;
    }
    
     function  onmouseoutChange(obj)
    {
        obj.style.borderWidth = " 0px " ;
        obj.style.backgroundColor = " #FFFFFF " ;
    }

JavaScript 直接对 style 属性进行修改，来达到动态改变元素风格的目的。
假定元素(id1)的风格表单声明 :
style="font-family:Arial;font-size:12px;"
则您就可以在 JavaScript 中读取和修改风格属性
document.getElementById("id1").style.fontFamily = "Geneva";
document.getElementById("id1").style.fontSize = "14px";
注意:CSS 属性自身是 camelCased 的大小写是驼峰式的，即第一个词的首字小写，随后的每个词首字大写，而不是用连字符“-”进行连接的;如document.getElementById ("id1").style.font-family = "Geneva";这样写是错误的。