2

私はJavaスクリプトが初めてなので、疑問がありました。ユーザー名とパスワードを使用してフォームを作成しましたが、クリック時にテキスト ボックスの背景色を変更する方法を知る必要がありますか? それは役に立ちます。私のコード:

 <script type="text/javascript">    
 function AllowLock(){
               if (!locker.lock.value.match(/[a-zA-Z]$/) && locker.lock.value !="")
               {
                    locker.lock.value="";                     
                    alert("Please Enter only valid lock");
               }
               if(locker.lock.value.length > 5)
               alert("max length exceeded");               
             } 
function AllowKey(){
               if (!locker.keys.value.match(/[a-zA-Z]$/) && !locker.keys.value.match(/[0-9]+$/))
               {
                    locker.keys.value="";                   
                    alert("Please Enter only valid key");
               }
               if(locker.keys.value.length > 5)
               alert("max length exceeded");               
             }           

function LockName(){
 {
 if(locker.lock.value.length==0)
document.getElementById('errfn').innerHTML="this is invalid name";
} 

{
 if(locker.keys.value.length==0)
 document.getElementById('error').innerHTML="this is invalid key";
 }
 }
 </script>
4

7 に答える 7

3

これをボタンの onclick 関数に追加します。

document.getElementById('error').style.backgroundColor="#some hex value";
于 2013-09-20T06:44:59.190 に答える
3

入力がフォーカスされている間に を変更したい場合background-color(キャレットが 内にinputあり、ユーザーがそれを操作している場合、JavaScript は必要ありません。CSS を使用できます:

input:focus {
    background-color: #ffa;
}

JS フィドルのデモ。

ただし、JavaScript の場合:

var el = document.getElementById('inputElementID');
el.style.backgroundColor = '#ffa';
于 2013-09-20T06:47:24.460 に答える
1

クリックする代わりに、フォーカスを使用する方が良いでしょう。

これには jquery を使用します。

Jquery は JavaScript とは見た目が異なりますが、JavaScript で構築されています。Google CDN から jquery を含めるだけです。または、ダウンロードしてファイルに含めるだけです。

$( "#divName" ).focus(function() { //give the div a name, and wrap the div around the text box
  $(this).css( "background", "red" );
});

編集：そうそう！その男は正しいです！そのための完全な疑似クラスがあります。(それを処理する CSS トリック)

于 2013-09-20T06:46:34.853 に答える
1

CSS

そのために JavaScript は必要ありません。このスタイルを追加するだけです -

割り当てられている場合はid、IDを使用してerror-

/* if your text box id is error */
#error:focus{
  background-color: #ff0000;/* red some color*/
}

それ以外の場合は、tagname などによって、いつでも他の CSS セレクターも使用できます。

/* for input tags */
input:focus{
  background-color: #ff0000;/* red some color*/
}

またはクラスごとに

/* for `some-class` */
.some-class:focus{
  background-color: #ff0000;/* red some color*/
}

JavaScript

JavaScript を使用する場合 -

/* assuming your input element has id - `error` */
var el = document.getElementById("error");

/* add a click listener to it */
el.onclick = function() {
   el.style.backgroundColor = "#ff0000";
}

ノート

css を使用する方法は JavaScript よりも優れています。その理由はクリーンでありelement-selector:focus、input.

于 2013-09-20T06:46:47.260 に答える
1

これには jQuery を使用してみてください。それははるかに簡単です

$('#lock').click({
      var input = $('#input').val();
      var regex = '/[a-zA-Z]$/';  

      if(input != ''
      && !input.match(regex))
      {
          input.val('');                     
          alert("Please Enter only valid lock");                        
      }

      if(input.length > 5)
      {
           alert("max length exceeded");   
      }  

      //Here is the CSS part. You can change it of the button or the input field
      $('#input').css('background-color', 'red');
});

付属のサンプル HTML は次のとおりです。また、特定の入力に適用できる maxlength 属性により、「最大長を超えた」機能が不要になる場合があります。

<input id="input" value="" type="text" maxlength="5" />
<button id="lock">Lock</button>
于 2013-09-20T07:03:38.530 に答える
1

入力ボックスの背景色を変更したいだけなら、JavaScript は必要ありません。CSS :focus 疑似クラスを使用するだけです。

input:focus{
    background: #ffff00;
}

CSS 疑似クラスの詳細については、このページをご覧ください - http://www.tutorialrepublic.com/css-tutorial/css-pseudo-classes.php

于 2013-09-20T06:47:36.120 に答える