2

必要なフォーム要素のスタイルを変更するためのJavaScriptの記述方法を知りたいです。値が含まれている場合は変更します。

私がやりたいのは、必須のテキストフィールドが空白の場合はその周囲に色付きの境界線を設定し、値がある場合は境界線のスタイルを削除することです。

私が考えたのは、値が空かどうかをチェックして適切なスタイルを設定する単一のjavascript関数を作成することです。

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

しかし、私がこだわっているのは、ユーザーがこれらの必須フィールドに文字を入力/削除するときにスタイルを変更し、フィールドの関数を呼び出すことです。

私は単純なhtmlフォームを持っており、各入力には一意のIDがあります。

4

2 に答える 2

1

要素の値がいつ変更されるかを判断するには、カスタム関数をイベント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";
}
于 2012-09-26T20:32:01.457 に答える
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;
}
于 2012-09-26T20:26:17.827 に答える