时间戳

首页 > 解决方案 > 当我输入并提交内容时，如何停止输入表单以更改背景颜色和文本颜色？

javascript - 当我输入并提交内容时，如何停止输入表单以更改背景颜色和文本颜色？

问题描述

.button{
    outline-color: rgba(0,0,0,0.7);
    width:290px;
    margin: 20px 10px 10px 5px;
    height:80px;
    font-size:44px;
    color:orange;
    background-color:rgba(0,0,0,0.7);
    border: 0;
    border-bottom:2px solid black;
    cursor:pointer;
} 
.button:hover{
        background-color:rgba(0,0,0,0.7);
    }
    
.button:focus{
        background-color: rgba(0,0,0,0.7);
        width: 300px;
}



<form action="" onsubmit="return submitMove()">
        <label class="lable">First Coordinate</label>
        <div><input class="button" type="text" id="currentCoordinate" onchange="backgroundColor: rgba(0,0,0,0.7)" onclick="clickInput()"></div>
        <lable class="lable">Second Coordinate</lable>
        <div><input class="button" type="text" id="moveToCoordinate"  onchange="backgroundColor: rgba(0,0,0,0.7)" onclick="clickInput()"></div>
        <button class="button" onclick="clickInput()">Submit move</button>
    </form>




function clickInput() {
    document.getElementById("currentCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
    document.getElementById("moveToCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
}

我想要的是让输入字段根本不改变颜色。我根本做不到。任何需要 CSS 或 javascript 的解决方案都可以。我希望表单颜色始终保持黑色。或者当您单击输入表单时，有没有办法阻止表单执行下拉建议？谢谢

我希望颜色总是看起来像底部的输入表单，而不是像顶部的输入表单那样变白

标签： javascriptcssforms

解决方案

悬停效果

如果您不希望输入颜色在悬停时更改，请删除这段代码：

.button:hover{
        background-color:rgba(0,0,0,0.7);
    }

选择效果

如果您不希望在选择时更改输入颜色，请删除这段代码：

.button:focus{
        background-color: rgba(0,0,0,0.7); // Remove this line
        width: 300px;
}

，onclick="clickInput()"从表单中删除并删除功能 -

function clickInput() {
    document.getElementById("currentCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
    document.getElementById("moveToCoordinate").style.backgroundColor = "rgba(0,0,0,0.7)"
}

输入变化效果

如果不希望输入框中的数据发生变化时输入颜色也发生变化，去掉这段代码：

onchange="backgroundColor: rgba(0,0,0,0.7)"

浏览器效果

这是浏览器添加的默认样式（大多数情况下为蓝色轮廓）以克服此问题：

.button:focus{
        outline: none; // Add this line
}

推荐阅读