急！HTML中设置表单--文字字段，那么编辑文本框的时候如何更改文本框的颜色
这个是文本框<inputtype="text">我希望编辑他的时候，文本框变成这样：该如何实现？你可能理解错了我的意思。我是指，不编辑的时候，是第一幅图片的，当我编辑他的...
这个是文本框<input type="text">
我希望编辑他的时候，文本框变成这样：
该如何实现？
你可能理解错了我的意思。
我是指，不编辑的时候，是第一幅图片的，当我编辑他的时候，也就是点击鼠标进去写字的时候，变成第二种。
然后，编辑完毕，又回到第一种样式 展开
我希望编辑他的时候，文本框变成这样：
该如何实现？
你可能理解错了我的意思。
我是指，不编辑的时候，是第一幅图片的，当我编辑他的时候，也就是点击鼠标进去写字的时候，变成第二种。
然后，编辑完毕，又回到第一种样式 展开
6个回答
展开全部
设置一下文本框的border属性
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#txt1
{
border:3px dashed #abcdef;
}
</style>
</head>
<body>
<input type="text" name="" id="txt1"/>
</body>
</html>
追问
你可能理解错了我的意思。
我是指，不编辑的时候，是第一幅图片的，当我编辑他的时候，也就是点击鼠标进去写字的时候，变成第二种。
然后，编辑完毕，又回到第一种样式
追答
那也好办，要用javascript来实现
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#txt1
{
border-width:2px;
border-color: #000;
}
</style>
<script>
window.onload=function()
{
var oTxt1=document.getElementById('txt1');
oTxt1.onfocus=function()
{
this.style["borderStyle"]="dashed";
}
oTxt1.onblur=function()
{
this.style["borderStyle"]="solid";
}
}
</script>
</head>
<body>
<input type="text" name="" id="txt1"/>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
定义两个css样式
.csstest1{} 在不编辑的时候显示的样式
.csstest2{} 在编辑的时候显示的样式
定义两个javascript函数
function addcss(thisObj){
thisObj.className="csstest2" ;
};
function deletecss(thisObj){
thisObj.className="csstest1" ;
}
然后给你的input加获得失去焦点的函数
如 <input type="text" name="" id="" onFocus=“addcss(this)” onBlur="deletecss(this)" class="csstest1"/>
思路就是你定义好两种要显示的样式，在input获得失去焦点时用js控制改变显示样式
.csstest1{} 在不编辑的时候显示的样式
.csstest2{} 在编辑的时候显示的样式
定义两个javascript函数
function addcss(thisObj){
thisObj.className="csstest2" ;
};
function deletecss(thisObj){
thisObj.className="csstest1" ;
}
然后给你的input加获得失去焦点的函数
如 <input type="text" name="" id="" onFocus=“addcss(this)” onBlur="deletecss(this)" class="csstest1"/>
思路就是你定义好两种要显示的样式，在input获得失去焦点时用js控制改变显示样式
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个得麻烦一些了，要考虑未编辑时和编辑时的两种情况，添加行为，控制border属性。
追问
是啊，该怎么而实现~啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你要的是聚焦输入的时候是一种样式；
失去焦点（光标不在输入框的时候还原）。
大概思路就是
定义俩个类名
.inputFocus {border:1px dashed red;}
.inputBlur {border:0;}
然后再input中添加事件。onfocus="this.className='inputFocus'" onblur="this.className='inputBlur'" class=""
大概就那样的，跟onfocus ,onblur两个事件有关，上面的代码我没有测试。你试试看吧。。。不行再回我。。。
失去焦点（光标不在输入框的时候还原）。
大概思路就是
定义俩个类名
.inputFocus {border:1px dashed red;}
.inputBlur {border:0;}
然后再input中添加事件。onfocus="this.className='inputFocus'" onblur="this.className='inputBlur'" class=""
大概就那样的，跟onfocus ,onblur两个事件有关，上面的代码我没有测试。你试试看吧。。。不行再回我。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
直接 给input加边框 border:1px dashed red; 颜色 大小你可以改成自己想要的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
