2014-11-04 2 views
3

Я создал div в формате таблицы, который я использую для фильтрации параметров данных. У меня возникают проблемы с нажатием enter из текстового поля. Когда я нажимаю кнопку ввода, появляется предупреждение, но страница просто перезагружается и не фильтруется надлежащим образом с помощью любого из параметров. Может ли кто-нибудь объяснить мне, что происходит?Как вызвать функцию на вводе текста введите клавишу нажатой?

Пожалуйста, дайте мне знать, если я не понял или что-то объясню!

Это то, что выглядит мой фильтр вариант бар как:

enter image description here

HTML:

<form name="myform"> 

    <center><table id="mykeyTable" border="1" cellspacing="10" cellpadding="10"> 
    <center></center> 

</td> 


<!--Search bar --> 
    <tr> 
    <td colspan="4"> 
    <center> 
     <form> 
     Starts With: <input type="text" id="myText" value=""><br> 
     </form> 
    </center> 
    </tr> 

<!-- Site Options --> 
    <td><center>Site</center><br> 
        <input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Asc"checked> 
        <input type ='button' id='siteIDChosen' class='button-addAsc'/> 
       <br> 
        <input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Desc" > 
        <input type ='button' id='siteIDChosen' class='button-addDesc'/> 
       <br> 
     </input> 
    </form></td> 

<!-- Status options --> 

    <td><center>Status 
    <br><br></center><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)"value="Online"> Online<br><input type="radio" name="siteStatus" onclick="up\ 
dateSiteStatus(this.value)" value="Offline"> Offline<br><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)" value="Both" checked> Both </form></td\ 
> 



<!-- usage plan --> 
    <td><center>Usage Plan (in MB)</center> 
<br><input type="radio" name="usagePlan" onclick="updateUsagePlan(this.value)" value="yesUsagePlan"> Data Plan<br><input type="radio" name="usagePlan" onclick="updateUsage\ 
Plan(this.value)" value="noUsagePlan"> No Data Plan<br><input type="radio" name ="usagePlan" onclick="updateUsagePlan(this.value)" value="bothUsagePlan" checked> All Plans\ 
</form></td> 



    </table> 
<br> 
<form><input type='button' id='filter' name='Submit' onclick='validate()' class='button-add' value=" Filter Selections"/></form> 

</center> 

</form> 
</div> 

Javascript:

<script> 


$("#myText").keypress(function(event) { 
    if (event.which == 13) { 
     alert("You pressed enter"); 
    validate(); 

    } 
}); 



$(document).keypress(function(event){ 
    if(event.keyCode == 13){ 

     validate(); 
    } 
}); 




function validate() { 
//... 
} 

</script> 

РЕШИТЬ:

Я использовал JQuery нажмите, чтобы вызвать такую ​​же функцию, используемую в качестве кнопки.

$(document).keypress(function(event){ 
    if(event.keyCode == 13){ 
    $('#filter').click(); 
     // validate(); doesn't need to be called from here 
    } 
}); 
+0

Ваше решение работает только в том случае, если я вхожу в документ, но если я сосредоточусь на inputText и нажимаю enter, он переопределяет метод $ ('# filter'). Click() 'и вызывает все другие методы доступны в скрипте. любая идея, в чем проблема? –

ответ

2

Я подозреваю, что вы получили ошибку в своей функции validate(). Попробуйте поместить предупреждение после того, как вы вызовете validate(), и посмотрите, все ли вы получаете предупреждающее сообщение. Как это ...

$("#myText").keypress(function(event) { 
    if (event.which == 13) { 
     validate(); 
     alert("You pressed enter"); 
    } 
}); 
+0

Я переключил две линии, и я все еще получаю предупреждающее сообщение, но не фильтр. Когда я вставляю текст внутри поля ввода и выхожу за пределы текстового поля и либо нажимаю кнопку «Ввод», либо кнопку «Фильтр», то он работает. Но почему это не работает из текстового поля? Есть ли хакерский способ вызвать кнопку фильтра onClick из моего jQuery? – MadsterMaddness

+0

Хммм ... Я мог бы попытаться установить фокус вне текстового поля, а затем имитировать нажатие клавиши ввода. – EricBellDesigns

+0

Когда я перемещаю предупреждение для проверки функции, предупреждение появляется дважды. Вы знаете, что может вызвать что-то подобное? Как вы имитируете нажатие кнопки из jQuery? – MadsterMaddness

0

Похоже, проблема, описанная в вашем вопросе «Как вызвать функцию при вводе текста, введите клавишу нажатой?» это не проблема, поскольку у вас есть соответствующие события, настроенные для прослушивания клавиши Enter. Что вам нужно сделать, так это исправить вашу функцию проверки подлинности для обновления пользовательского интерфейса. Попытайтесь перенести предупреждение в первую строку функции проверки и оттуда, чтобы выяснить, где находится ваш код.

Кроме того, похоже, что ваш HTML может быть исправлен ... теги - устаревший код старой школы. Вы не можете иметь вложенные теги. И последнее, что вы не закрываете свои теги должным образом. Проблемы, с которыми вы сталкиваетесь, могут быть связаны, особенно с вложенными тегами, поскольку браузер попытается исправить ваш HTML-код и кто знает, какие параметры отправки будут отправлять.

Совет. Используйте консоль инспектора Chrome, чтобы точно увидеть, где находится ваш код. View-> Developer-> Javascript Console

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