Question

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

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

我想到的是写一个单独的javascript函数来检查值是否为空并设置合适的样式：

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

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

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

Answer 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;
}

Answer 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";
}

如何根据需要的表单输入更改CSS样式

2 个答案: