css 文本框聚焦时如何控制无边框

发布网友发布时间：2022-03-03 04:16

共5个回答

热心网友时间：2022-03-03 05:46

具体实现代码如下：
var inputO = document.getElementById("input1");
inputO.onblur = function()
{
inputO.style.border = "1px solid rgb(0, 0, 0)";//input失去焦点时的边框状态
}
inputO.onfocus = function()
{
inputO.style.border = 0; //input得到焦点时的边框状态
}

热心网友时间：2022-03-03 07:04

<!doctype html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>文本框得到焦点去边框</title>
        <link rel="stylesheet" href="inputOnblur.css">
    </head>

    <body>
        <input type="text" id="input1">

    <script src="inputOnfocus.js"></script>
    </body>
</html>

inputOnfocus.js 文件代码清单如下：

var inputO = document.getElementById("input1");
inputO.onblur = function()
  {
    inputO.style.border = "1px solid rgb(0, 0, 0)";//input失去焦点时的边框状态
  }
inputO.onfocus = function()
  {
    inputO.style.border = 0;     //input得到焦点时的边框状态
  }

热心网友时间：2022-03-03 08:38

我习惯用jquery用这段代码试试。
//获得焦点时的边框样式
$("#inputID").focus(function(){ $(this).css("border",0);});

//失去焦点时的边框样式
$("#inputID").blur(function(){ $(this).css("border","1px solid red");});

希望能帮到你！

热心网友时间：2022-03-03 10:30

热心网友时间：2022-03-03 12:38

outline:none;