2016-01-15 3 views
1

Я создал скрипт, который выделяет активное текстовое поле. Он работает на JSFiddleJQuery Highlight Active Textbox

https://jsfiddle.net/FingersCrossedErie/kgbhe2j5/

Однако, это не работает на моей странице. Я что-то упускаю?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    <script> 
     $('input[type="text"]').focus(function() { 
      $(this).addClass("focus"); 
     }); 

     $('input[type="text"]').blur(function() { 
      $(this).removeClass("focus"); 
     }); 
    </script> 
    <style> 
     .focus { 
    border: 2px solid #AA88FF; 
    background-color: #FFEEAA; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <label>Name:</label> 
     <input type="text" /> 
    </div> 
    <div> 
     <label>Age:</label> 
     <input type="text" /> 
    </div> 
    <div> 
     <label>Phone:</label> 
     <input type="text" /> 
    </div> 
    </form> 
</body> 
</html> 
+0

ли вы случайно использовать Wordpress, есть причина, почему с этим? – Bigwater

+0

Какой у вас URL? – Bigwater

+0

Нет. Я не использую Wordpress. Это на моей локальной машине. Я использовал другие скрипты JQuery локально, и они отлично работали. –

ответ

1

Попробуйте использовать функцию готовности документа, она может быть вызвана до готовности DOM.

$(document).ready(function(){ 
//Rest of code here 
}); 
0
$(document).ready(function() { 

      $('input[type="text"]').focus(function() { 
       $(this).addClass("focus"); 
      }); 

      $('input[type="text"]').blur(function() { 
       $(this).removeClass("focus"); 
      }); 

    });