0

I am working with addeventlistener to create events and dynamically adding removing class name too. This is my code. Am getting expected result for first text box but not the next where i am wrong.

<html>  
  <style>
    .test5 {
      border: 1px solid #000;
      outline: none;
    }
  </style>  
  <body>
    <form id="form">
      <input type="text" id="ids" class="test1" value="test1">
      <div class="test7" id="test">test</div>
      <input type="text" id="ids" class="test1" value="test2">
    </form>      
    <script>
      function gettext() {
        var val = this.className += " test5";
        console.log(val);
      }
      function gettexts() {
        var val1 = document.getElementById('ids').classList.remove('test5');
      }
      var get = document.getElementsByClassName('test1');
      //for (i = 0; i < get.length; i++) {
        //get[i].addEventListener('focus', gettext, false);
        //get[i].addEventListener('blur', gettexts, false);
        get[0].addEventListener('focus', gettext, false);
        get[0].addEventListener('blur', gettexts, false);
      //}
    </script>
  </body>
<html>
4

3 回答 3

0

您需要访问事件处理程序中的事件对象以访问受影响的元素：

function gettext(event) {
  event.target.className += 'test5';
  console.log(event.target);
}

var get = document.getElementsByClassName('test1');
for (i = 0; i < get.length; i++) {
  get[i].addEventListener('focus', gettext, false);
}

此外，通过使用事件委托，您不需要将事件处理程序分配给所有输入，而只需分配给一个共同的祖先（例如文档或周围的 div）：

function gettext(event) {
  if (event.target && event.target.nodeName == 'INPUT') {
    event.target.className += 'test5';
    console.log(event.target);
  }
}

document.addEventListener('focus', gettext, true); // EDIT: Oops, the third parameter needs to true for this to work

编辑：工作示例：http: //jsfiddle.net/88DnZ/

另外：如果您只想更改焦点输入元素的样式，则无需使用 JavaScript。只需使用 CSS：

input:focus {
  border-color: red;
}
于 2013-05-13T13:18:25.993 回答
-1 
<script>
        function focus() {

            var val = this.className = "test5";
            console.log(val);
        }

        function blur() {
            this.className = "test1";
        }
        var get = document.getElementsByTagName('input');
        for (i = 0; i < get.length; i++) {
            get[i].addEventListener('focus', focus, false);
            get[i].addEventListener('blur', blur, false);

        }

    </script>
    <style>
    .test5
    {
        color:Red;
        }
    </style>
于 2013-05-13T12:59:33.563 回答
-3

First suggestion: please use jquery;

Second, before you do somenthing you must wait the page load event;

Third, do not put code inside body ... !;

If I understand what you whant this is the code:

<html>
    <style>
      .test5{
        border: 1px solid #000;
        outline: none;
      }
    </style>
    <script>
     function gettext() {
        var val = this.className += " test5";
        console.log(val);
    }

    function gettexts() {
        var val1 = document.getElementById('ids').classList.remove('test5');
    }


    window.onload = function(){
            var get = document.getElementsByClassName('test1');
        //for (i = 0; i < get.length; i++) {
            //get[i].addEventListener('focus', gettext, false);
            //get[i].addEventListener('blur', gettexts, false);
            get[0].addEventListener('focus', gettext, false);
            get[0].addEventListener('blur', gettexts, false);
        //}
    }

    </script>
    <body>
    <form id="form">
      <input type="text" id="ids" class="test1" value="test1">
      <div class="test7" id="test">test</div>
      <input type="text" id="ids" class="test1" value="test2">
    </form>

    <script>


    </script>
    </body>
    <html>

That's all folks!

于 2013-05-13T13:07:55.350 回答