Заставьте функцию onclick работать с кнопкой ENTER и Go в Safari Mobile (iOS)

У меня есть форма, в которой кнопка вызывает функцию onclick:

<form>
    <input type="text" id="start" name="start">
    <input type="button" onclick="calcRoute();" value="Go">
</form>

function calcRoute() {
    var start = document.getElementById('start').value;
      var end = "My Address in Rome";
      var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.TRANSIT
      };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}

Он корректно работает в любом браузере, если нажать кнопку Перейти (<input type="button">). Этого не произойдет, если я заполню <input type="text"> и нажму ENTER на клавиатуре (или, например, нажму кнопку Go на клавиатуре iOS). Итак: это работает, если я нажимаю input type="button", а не если я нажимаю ENTER с клавиатуры. Как я могу заставить его работать таким же образом?

РЕДАКТИРОВАТЬ: Пожалуйста, не jQuery или другой фреймворк. :)


javascript html onclick dom-events buttonclick
person MultiformeIngegno    schedule 28.04.2013    source источник
comment
Почему вы не используете кнопку отправки и почему вы используете встроенный javascript?   -  person PeeHaa    schedule 28.04.2013
comment
Хм, также, если я изменю его на <input type="submit">, все равно не сработает. Что вы подразумеваете под встроенным js? :)   -  person MultiformeIngegno    schedule 28.04.2013
comment
Он имеет в виду onclick="calcRoute();". Это осуждается по тем же причинам, что и встроенные стили. Мы избегаем встроенного javascript, связывая обработчики событий в нашем окне загрузки или, если используем jquery, документ готов. Но мы должны быть здесь, чтобы ответить на ваш вопрос, а не критиковать стиль вашего кода.   -  person Stoutie    schedule 08.08.2014

Ответы (5)


arrow_upward
3
arrow_downward

Вы действительно должны просто удалить этот встроенный javascript и превратить эту кнопку в настоящую кнопку отправки. После этого вы можете легко захватить отправляемую форму (будь то клавиша ввода или кнопка отправки):

form.addEventListener('submit', calcRoute);

Демонстрация: http://jsfiddle.net/ghK4P/

person PeeHaa    schedule 28.04.2013
comment
Я пробовал (вот демо с вашим кодом): ffio.it/test.html Нажмите на calcola percorso . Когда вы вводите адрес, он должен построить маршрут. Ничего не произошло... :) - person MultiformeIngegno; 28.04.2013
comment
Вы перезаписали функцию calcRoute(). Просто добавьте e.preventDefault() в свою функцию и не забудьте добавить e в качестве аргумента. - person PeeHaa; 28.04.2013
comment
Также в вашем конкретном случае вы бы предпочли сделать var form = document.getElementbyId('percorsoform'); - person PeeHaa; 28.04.2013
comment
Здесь я помещаю ваш код в существующую функцию calcRoute(): ffio.it/test2.html - person MultiformeIngegno; 28.04.2013
comment
Нет, эту часть ты должен был оставить там, где она была. Я говорил о той части, где есть e.preventDefault();. - person PeeHaa; 28.04.2013
comment
См. мой предыдущий комментарий: stackoverflow.com/questions/16263331/ - person PeeHaa; 28.04.2013
comment
Опечатка извините. Это должно было быть getElementById с прописной буквой B - person PeeHaa; 28.04.2013
comment
stackoverflow.com/a/16263930/1342772 Если вы поможете мне преобразовать его в не встроенный javascript, я приму ваш ответ ! :) - person MultiformeIngegno; 28.04.2013

arrow_upward
0
arrow_downward

попробуй это:

<form onsubmit="calcRoute()">
    <input type="text" id="start" name="start">
    <input type="button" onclick="calcRoute();" value="Go">
</form>

я уверен, что это будет работать с обоими

person user2243116    schedule 28.04.2013
comment
Хм, нет :'(. Форма отправляется на сервер таким образом (и в URL у меня есть ?start=INPUT_TEXT - person MultiformeIngegno; 28.04.2013
comment
я не знаю, что вы пытаетесь сделать, и, следовательно, не могу ответить правильно, но попробуйте: ‹form onsubmit=return calcRoute()› - person user2243116; 28.04.2013
comment
Эм, нет. Такое же поведение. Вот демо: goo.gl/wr3qi, нажмите на calcola percorso. :) - person MultiformeIngegno; 28.04.2013
comment
@MultiformeIngegno я опубликовал еще один ответ, проверьте его - person user2243116; 28.04.2013

arrow_upward
0
arrow_downward

Возможно, добавьте это в свой код, если вы используете jquery

$(document).ready(function() {
$("#start").bind('keyup',function(event){
    if(event.keyCode == 13){
        $("#start").click();
    }
});
});

это вызовет функцию нажатия кнопки ur при нажатии клавиши ввода в текстовом поле.

Если вы не используете jquery, попробуйте этот

<input type="text" id="start" name="start" onkeydown="if (event.keyCode == 13) document.getElementById('fire_calRoute').click()">
<input type="button" id='fire_calRoute' onclick="calcRoute();" value="Go">

попробуйте это, надеюсь, это решит вашу проблему.

person SHUNMUGA RAJ PRABAKARAN    schedule 28.04.2013
comment
К сожалению, я не хочу использовать jQuery. - person MultiformeIngegno; 28.04.2013

arrow_upward
0
arrow_downward 

<input type="text" id="start" name="start" onkeypress="return calcRoute(event)">

теперь измените свой скрипт следующим образом:

function calcRoute(e) {
    if (e.keyCode == 13) {
        //your code
    }
}
person user2243116    schedule 28.04.2013
comment
Можете ли вы сказать, чего вы ожидаете и что получаете? - person user2243116; 28.04.2013
comment
Это должно работать так (введите адрес Рима и нажмите кнопку «Перейти»): goo.gl/wr3qi - person MultiformeIngegno; 28.04.2013
comment
Можете ли вы сказать мне какой-нибудь адрес в Риме, чтобы я мог проверить его? - person user2243116; 28.04.2013
comment
Ага, извини :D Попробуйте с Виа Эудженио Кекки, Рома - person MultiformeIngegno; 28.04.2013
comment
Это если вы наберете этот адрес и нажмете кнопку Vai (Go) - person MultiformeIngegno; 28.04.2013

arrow_upward
0
arrow_downward

Я нашел решение :)

<form onsubmit="calcRoute(); return false">
    <input type="text" id="start" name="start">
    <input type="submit" value="Vai">
</form>
person MultiformeIngegno    schedule 28.04.2013
comment
Есть ли решение без использования тега формы? - person NAVNEET CHANDAN; 19.04.2021