web-dev-qa-db-ja.com

JavaScriptを使用してテキストボックスの境界線の色を変更する

フォームの検証を行っています。フォーム入力が正しくない場合、テキストボックスに赤い境界線を追加します：

document.getElementById("fName").style.borderColor="#FF0000"

これにより、2pxの赤い境界線が表示されます。私がやりたいのは、ユーザーが正しい値を入力して元の境界に戻るかどうかです...

誰かが私がJavaScriptで境界線のサイズと色を変更する方法を教えてもらえますか

javascriptcsstextboxborder
15
kevin

代わりにCSSクラスでCSSスタイルを使用する

[〜＃〜] css [〜＃〜]

.error {
  border:2px solid red;
}

Javascriptで

document.getElementById("fName").className = document.getElementById("fName").className + " error";  // this adds the error class

document.getElementById("fName").className = document.getElementById("fName").className.replace(" error", ""); // this removes the error class

私がこれに言及する主な理由は、エラー要素の境界線の色を変更したいということです。方法を選択した場合、コード内の多くの場所を変更する必要があります。私の方法を選択した場合、スタイルシートを簡単に編集できます。

20
John Hartsock
document.getElementById("fName").style.border="1px solid black";
11
josh.trow

試してみてください

document.getElementById('name').style.borderColor='#e52213';
document.getElementById('name').style.border='solid';
4
CEN

を追加 onchange 入力要素へのイベント：

<input type="text" id="fName" value="" onchange="fName_Changed(this)" />

Javascript：

function fName_Changed(fName)
{
    fName.style.borderColor = (fName.value != 'correct text') ? "#FF0000"; : fName.style.borderColor="";
}
3
BumbleB2na

document.getElementById("fName").style.borderColor="";

境界線の色を元に戻すのに必要なのはこれだけです。

境界線のサイズを変更するには、element.style.borderWidth = "1px"を使用します。

2
Matt Ball

私はjQuery IMHOを使用してみるべきVicente Plataが最高のjavascriptライブラリであることには同意します。 CSSファイルにクラスを作成し、jqueryで次のことを行うことができます。

$('#fName').addClass('name_of_the_class');

それだけです。もちろん、ブラウザの非互換性について心配する必要はありません。それはjqueryのチームの問題です：D LOL

2
PachinSV

ユーザーが間違った値を入力した場合、入力フィールドに1pxの赤色の境界線を適用します。

document.getElementById('fName').style.border ="1px solid red";

ユーザーが正しい値を入力した場合、入力フィールドから境界線を削除します。

document.getElementById('fName').style.border ="";
1
Nandu Hulsure