Javascript 如何在单击时更改文本框的背景色

我不熟悉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>  

函数AllowLock（）{
如果（！locker.lock.value.match（/[a-zA-Z]$/）和&locker.lock.value！=“”）
{
locker.lock.value=“”；
警报（“请仅输入有效锁”）；
}
如果（locker.lock.value.length>5）
警报（“超过最大长度”）；
} 
函数AllowKey（）{
如果（！locker.keys.value.match（/[a-zA-Z]$/）和&！locker.keys.value.match（/[0-9]+$/）
{
locker.key.value=“”；
警报（“请仅输入有效密钥”）；
}
如果（locker.keys.value.length>5）
警报（“超过最大长度”）；
}           
函数LockName（）{
{
if（locker.lock.value.length==0）
document.getElementById（'errfn'）.innerHTML=“这是无效的名称”；
} 
{
if（locker.keys.value.length==0）
document.getElementById（'error'）.innerHTML=“这是无效键”；
}
}

将此项添加到按钮的onclick功能中

document.getElementById('error').style.backgroundColor="#some hex value"; 

---

与其点击，不如使用焦点

为此使用jquery

Jquery看起来与javascript不同，但它是用javascript构建的。只需将jquery包含在GoogleCDN中即可。或者下载它并将其包含在您的文件中

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

编辑：哦，是的！这家伙是对的！这完全是一个伪类。（一个处理它的CSS技巧）

CSS

不需要JavaScript，只需添加此样式-

如果您分配了一些

id

，则使用id

error

-

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

否则您也可以使用其他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好，因为它干净，而且如果您想在输入被聚焦时更改背景颜色，当您在

输入

外部单击时，

元素选择器：focus

将自动设置上一个背景颜色（插入符号位于

输入

中，用户正在与其交互。不需要JavaScript，您可以使用CSS：

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

但是，对于JavaScript：

var el = document.getElementById('inputElementID');
el.style.backgroundColor = '#ffa';

---

如果只想更改输入框中的背景颜色，则不需要任何JavaScript 只需使用CSS:focus伪类

input:focus{
    background: #ffff00;
}

---

查看此页面了解有关CSS伪类的更多信息-

我认为是这样的：

 <script>
    window.onload="myFunction(
        var textbox = document.getElementById('elementID');
        textbox.onclick = changeColor;
        function changeColor() {
            textbox.style.backgroundColor = "#000000";
            return false;
        }
    )";
 </script>

window.onload=“myFunction(
var textbox=document.getElementById（'elementID'）；
textbox.onclick=changeColor；
函数changeColor（）{
textbox.style.backgroundColor=“#000000”；
返回false；
}
)";

尝试使用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>

锁

document.getElementById（“elementID”）.style.backgroundColor='your color'

这可以通过像David Thomas这样的普通CSS完成，其他人很少提到过。JS不是必需的。我需要为onclick创建新函数吗？你可以调用任何函数。只需在html标记中添加onclick“functionname（）；”