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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 01:00:14  来源:igfitidea点击:

Change text box border when it is clicked

javascripthtmlcsstextbox

提问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 选择的更多事实