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*/
}

否则你也总是可以使用其他 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

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

input:focus{
    background: #ffff00;
}

查看此页面以了解有关 CSS 伪类的更多信息 - http://www.tutorialrepublic.com/css-tutorial/css-pseudo-classes.php

于 2013-09-20T06:47:36.120 回答
1

我认为是这样的：

 <script>
    window.onload="myFunction(
        var textbox = document.getElementById('elementID');
        textbox.onclick = changeColor;
        function changeColor() {
            textbox.style.backgroundColor = "#000000";
            return false;
        }
    )";
 </script>
于 2013-09-20T06:47:48.623 回答
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 回答