如何根据其值更改所需表单输入的 CSS 样式答案

【问题标题】：How to change the CSS style on required form inputs based on their values如何根据其值更改所需表单输入的 CSS 样式
【发布时间】：2012-09-26 20:21:58
【问题描述】：

我想知道如何编写 javascript 来更改所需的表单元素的样式；如果它们有值，就改变它们。

我想要做的是在所需的文本字段为空白时在它们周围有一个彩色边框，并在它们有值时删除边框样式。

我想做的是编写一个 javascript 函数来检查值是否为空并设置适当的样式：

function requiredElement(id) {
  var Input = document.getElementById(id);
  if(Input.value==null) {
    Input.style.border = '2px solid #FF0000';
  }
}

但我坚持的是在用户在这些必填字段中输入/删除字符时更改样式，并为这些字段调用函数。

我有一个简单的 html 表单，每个输入都有一个唯一的 ID。

【问题讨论】：

标签： javascript html validation

【解决方案1】：

使用 jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

然后添加这段代码：

$('.important').change(function() {
  if(($(this).val()) != '') $(this).css( 'border-width', '0' );
  else  $(this).css( 'border-width', '2' );
});

假设您在 css 中添加了边框

.important
{
    border-style:solid;
    border-width:2px;
    border-color:red;
}

【讨论】：

【解决方案2】：

要确定元素的值何时更改，请将您的自定义函数绑定到 onchange 和 onkeypress 事件（或者，在 jQuery 中，绑定到 .change() 和 .keypress()）。

要真正改变元素的外观，最好在 CSS 类中定义样式，并使用 JavaScript 酌情添加/删除类。

您可以像这样通过 JavaScript 更改 HTML 元素的 CSS 类：

element = document.getElementById("myElement");
element.className = "invalid";

或者，在 jQuery 中，使用 .addClass() 函数：

$("#myElement").addClass("invalid");

HTML：

<input id="something" name="something" type="text" class="inputClass"
    onchange="requireElement(this)"
    onkeypress="requireElement(this)" />

JavaScript：

function requireElement(element) {
    if(element.value == null)
        element.className = "inputClass invalid";
    else
        element.className = "inputClass";
}

【讨论】：