javascript 单击时更改文本框边框
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7702195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change text box border when it is clicked
提问by cohen
I am making a website and would like the border color of the text boxes to change on hover and when they are clicked.
我正在制作一个网站,并希望文本框的边框颜色在悬停时和单击时更改。
I have searched and found a few people showing the code for how to do it. I tried to run it from my LAMP server (dont know if embedded JS will work on a Lamp server) although it didnt work. The code was javascript which I don't really know so I couldn't understand what what was going wrong.
我搜索并找到了一些人展示了如何做的代码。我试图从我的 LAMP 服务器运行它(不知道嵌入式 JS 是否可以在 Lamp 服务器上运行),尽管它没有工作。代码是我真的不知道的 javascript,所以我不明白出了什么问题。
This is the code:
这是代码:
onload=function(){
var inp=document.getElementsByTagName('input'), i=0, t ;
while(t==inp[i++]){
if(t.type=='text'){
t.onclick=function(){this.style.border='1px solid red'}
}
}
}
</script>
Is there a way to do what I am wanting just with CSS/html or will I need to learn JavaScript as well?
有没有办法只用 CSS/html 做我想做的事,或者我还需要学习 JavaScript?
If its not too hard could explain how to do it or show me some example code?
如果它不太难可以解释如何做或向我展示一些示例代码?
Cheers - Cohen.
干杯 - 科恩。
回答by Aaron
Yes this can be done using CSS pseudo-classes
是的,这可以使用 CSS 伪类来完成
Here is an example:
下面是一个例子:
<style>
.fancyText:hover{border:1px solid red;}
.fancyText:focus{border:1px solid red;}
</style>
<input type='text' class='fancyText' />
回答by Ahmed
@Aaron is right, and you may visit w3school for css learning,
@Aaron 是对的,你可以访问 w3school 进行 css 学习,
if you want it using java-script you only need function onFocus, onBlur and access the text box via id
如果你想使用 java 脚本,你只需要函数 onFocus、onBlur 并通过 id 访问文本框
function change()
{
var a = document.getElementById('fansy');
a.style.border = '1px solid red';
}
回答by Max Allan
Why dont use jQuery to make it simpler?
为什么不使用 jQuery 使其更简单?
$(document).ready(function(){
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
});
Then you'll get multi browser support also....
Don't forget <script src="[the_path_to_jquery_file]" type="text/javascript"></script>
to include the jquery-file.
然后你也会得到多浏览器的支持......不要忘记<script src="[the_path_to_jquery_file]" type="text/javascript"></script>
包含 jquery 文件。
If you replace this
如果你更换这个
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
with this
有了这个
$('input[type="text"]').each(function(){
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
});
you will automatic get the inputs with attr. type = text. Here is more fact about jQuery attr selecting
您将自动获取带有 attr 的输入。类型 = 文本。 这是关于 jQuery attr 选择的更多事实