2015-12-10 3 views
0

в этом фрагменте кода у меня есть 2 раскрывающихся списка. один - это отдел, а другой - название раздела. на основе отдела я меняю свое имя раздела, а затем нажимаю эти два раскрывающихся списка на вкладку моей формы.onchange событие не работает в firefox

Проблема заключается в том, что событие onchange отлично работает в chrome, но не в firefox, если вы используете только клавиатуру (клавиша табуляции и клавиши со стрелками). как я могу исправить это без добавления jquery ??

function fields(){ 
 
    \t var seldprt = document.getElementById("seldprt");//seldprt is for Department 
 
    \t var section = seldprt.value;//assigning the value of Department dropdown list to section variable 
 
    \t var dprt_input=section; 
 
    \t var input_Department=document.getElementById("departmentinput"); 
 
    \t input_Department.value=dprt_input; 
 
     if(section=="REGULATORY") 
 
    \t \t { 
 
    \t \t \t 
 
    \t \t \t document.getElementById("LEGALDiv").style.display="none"; 
 
    \t \t \t document.getElementById("REGDiv").style.display=""; 
 
    \t \t \t var subsection=document.getElementById("REGDiv_subcatagory"); 
 
    \t \t \t var sub_catagory_input=subsection.value; \t \t \t \t \t 
 
    \t \t \t var input_Subcatagory=document.getElementById("subcatagoryinput"); 
 
    \t \t \t input_Subcatagory.value=sub_catagory_input; 
 
    \t \t } \t 
 
     else if(section=="LEGAL") 
 
    \t \t { 
 
    \t \t 
 
    \t \t \t document.getElementById("LEGALDiv").style.display=""; 
 
    \t \t \t document.getElementById("REGDiv").style.display="none"; 
 
    \t \t \t var subsection=document.getElementById("LEGALDiv_subcatagory"); 
 
    \t \t \t var sub_catagory_input=subsection.value; \t \t \t \t \t 
 
    \t \t \t var input_Subcatagory=document.getElementById("subcatagoryinput"); 
 
    \t \t \t input_Subcatagory.value=sub_catagory_input; 
 
    \t \t } \t 
 
     }
<div class="departmentdiv" onclick="fields()"><!-- here the function field is called on onclick event --> 
 
     <label>Department Name:</label> 
 
     <div align="right" class="selectdiv"> 
 
     <select id = "seldprt" onfocus="fields();" onchange="fields();" onkeypress="fields();"> 
 
     <option value = "LEGAL">LEGAL</option> 
 
     <option value = "REGULATORY">REGULATORY</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 

 
    <div id="REGDiv" class="subcatagorydiv" style="display:none" > 
 
    \t \t <label>Section Name:</label> 
 
    \t \t \t <div align="right" class="selectdiv"> 
 
    \t \t \t \t <select id = "REGDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeypress="fields()"> 
 
    \t \t \t \t \t <option value = "GLT">GLT</option> 
 
    \t \t \t \t \t <option value = "REGULATORY">REGULATORY</option> 
 
    \t \t \t \t </select> 
 
    \t \t \t </div> 
 
    \t </div> 
 

 
    <div id="LEGALDiv" class="subcatagorydiv" style="display:none" > 
 
    \t \t <label>Section Name:</label> 
 
    \t \t \t <div align="right" class="selectdiv" > 
 
    \t \t \t \t <select id = "LEGALDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeypress="fields()"> 
 
    \t \t \t \t \t <option value = "GLT">GLT</option> 
 
    \t \t \t \t \t <option value = "LEGAL">LEGAL</option> 
 
    \t \t \t \t </select> 
 
    \t \t \t </div> 
 
    \t </div> 
 

 
    <form action="" method="post" > 
 
    \t \t \t <div class="entry" onclick="previous_values()" style="">Name</div> 
 
    \t \t \t <input type="text" style="" name="name" id="departmentinput"> 
 
    \t \t \t <div class="entry" style="" onclick="previous_values()">Section Number</div> 
 
    \t \t \t <input type="text" style="" name="Section" id="subcatagoryinput"> 
 
    \t \t \t <div id="readwrite_buttons" class="hide"> 
 
    \t \t \t \t <button id="ok" onclick="document.forms[0].submit();return false;">OK</button> 
 
    \t \t \t \t <button id="cancel" onclick="javascript:window.close();return false;">Cancel</button> 
 
    \t \t \t </div> 
 
    \t \t \t <div id="readonly_buttons" class="hide"> 
 
    \t \t \t \t <button id="back" onclick="javascript:window.close();return false;">Back</button> 
 
    \t \t \t </div> 
 
    \t \t </form>

+0

Этот фрагмент кода работает, как описано в Firefox для меня, обновление текстовых материалов для возместим выбран в окне выбора. Можете ли вы подтвердить, что фрагмент нарушен в Firefox для вас? – Mic

+0

работает отлично, если вы используете мышь, но при использовании клавиатуры (с помощью вкладок и клавиш со стрелками) только в Firefox не работает. –

+1

Ах, в firefox onchange не запускается, пока коробка не теряет фокус. Это их намеренное поведение. См. Здесь: https://bugzilla.mozilla.org/show_bug.cgi?id=296125 – Mic

ответ

0

OnKeyUp событие должно делать то, что вы пытаетесь сделать. Это потенциально может генерировать много событий, поэтому я бы тщательно рассмотрел, действительно ли это необходимо. Я видел, что вы попробовали событие onkeypress в своем фрагменте. По неизвестным мне причинам, по крайней мере, в firefox, похоже, что они не поймают стрелки вверх/вниз, а onkeyup и onkeydown, по-видимому, делают.

function fields(){ 
 
    \t var seldprt = document.getElementById("seldprt");//seldprt is for Department 
 
    \t var section = seldprt.value;//assigning the value of Department dropdown list to section variable 
 
    \t var dprt_input=section; 
 
    \t var input_Department=document.getElementById("departmentinput"); 
 
    \t input_Department.value=dprt_input; 
 
     if(section=="REGULATORY") 
 
    \t \t { 
 
    \t \t \t 
 
    \t \t \t document.getElementById("LEGALDiv").style.display="none"; 
 
    \t \t \t document.getElementById("REGDiv").style.display=""; 
 
    \t \t \t var subsection=document.getElementById("REGDiv_subcatagory"); 
 
    \t \t \t var sub_catagory_input=subsection.value; \t \t \t \t \t 
 
    \t \t \t var input_Subcatagory=document.getElementById("subcatagoryinput"); 
 
    \t \t \t input_Subcatagory.value=sub_catagory_input; 
 
    \t \t } \t 
 
     else if(section=="LEGAL") 
 
    \t \t { 
 
    \t \t 
 
    \t \t \t document.getElementById("LEGALDiv").style.display=""; 
 
    \t \t \t document.getElementById("REGDiv").style.display="none"; 
 
    \t \t \t var subsection=document.getElementById("LEGALDiv_subcatagory"); 
 
    \t \t \t var sub_catagory_input=subsection.value; \t \t \t \t \t 
 
    \t \t \t var input_Subcatagory=document.getElementById("subcatagoryinput"); 
 
    \t \t \t input_Subcatagory.value=sub_catagory_input; 
 
    \t \t } \t 
 
     }
<div class="departmentdiv" onclick="fields()"><!-- here the function field is called on onclick event --> 
 
     <label>Department Name:</label> 
 
     <div align="right" class="selectdiv"> 
 
     <select id = "seldprt" onfocus="fields();" onchange="fields();" onkeypress="fields();"> 
 
     <option value = "LEGAL">LEGAL</option> 
 
     <option value = "REGULATORY">REGULATORY</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 

 
    <div id="REGDiv" class="subcatagorydiv" style="display:none" > 
 
    \t \t <label>Section Name:</label> 
 
    \t \t \t <div align="right" class="selectdiv"> 
 
    \t \t \t \t <select id = "REGDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeyup="fields()"> 
 
    \t \t \t \t \t <option value = "GLT">GLT</option> 
 
    \t \t \t \t \t <option value = "REGULATORY">REGULATORY</option> 
 
    \t \t \t \t </select> 
 
    \t \t \t </div> 
 
    \t </div> 
 

 
    <div id="LEGALDiv" class="subcatagorydiv" style="display:none" > 
 
    \t \t <label>Section Name:</label> 
 
    \t \t \t <div align="right" class="selectdiv" > 
 
    \t \t \t \t <select id = "LEGALDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeyup="fields()"> 
 
    \t \t \t \t \t <option value = "GLT">GLT</option> 
 
    \t \t \t \t \t <option value = "LEGAL">LEGAL</option> 
 
    \t \t \t \t </select> 
 
    \t \t \t </div> 
 
    \t </div> 
 

 
    <form action="" method="post" > 
 
    \t \t \t <div class="entry" onclick="previous_values()" style="">Name</div> 
 
    \t \t \t <input type="text" style="" name="name" id="departmentinput"> 
 
    \t \t \t <div class="entry" style="" onclick="previous_values()">Section Number</div> 
 
    \t \t \t <input type="text" style="" name="Section" id="subcatagoryinput"> 
 
    \t \t \t <div id="readwrite_buttons" class="hide"> 
 
    \t \t \t \t <button id="ok" onclick="document.forms[0].submit();return false;">OK</button> 
 
    \t \t \t \t <button id="cancel" onclick="javascript:window.close();return false;">Cancel</button> 
 
    \t \t \t </div> 
 
    \t \t \t <div id="readonly_buttons" class="hide"> 
 
    \t \t \t \t <button id="back" onclick="javascript:window.close();return false;">Back</button> 
 
    \t \t \t </div> 
 
    \t \t </form>

Смежные вопросы