点击可以编辑,这个是很好的用户体验,到网上搜索了一下.
代码了几份好的代码
<!
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 οnblur="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 >
< 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 οnblur="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' οnchange='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 >
< 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' οnchange='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();
}
{
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 ;
}
{
border-style : none ;
border-width : 2px ;
}
在文本框里面
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
--------------------------------------
其实上面的方法有笨不太必要,还有一种方法可以实现,把文本框设置没有边框,当点击后调用一个可以显示边框的方法
如:οnmοuseοver="onmouseoverChange(this);" οnmοuseοut="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 " ;
}
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 " ;
}
假定元素(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";这样写是错误的。