Остановить обновление страницы при нажатии "Ввод" в элементе ввода текста

Question

Есть ли способ остановить полное обновление веб-страницы при нажатии кнопки ввода в элементе ввода текста?

Я пытаюсь создать поле поиска, из которого я могу получить текст при нажатии клавиши Enter, чтобы отфильтровать объекты и отобразить только те, которые содержат текст из поля поиска.

Я попробовал следующее, чтобы попытаться поймать кнопку ввода, но она не работает.

function setupSearchField() {
    document.getElementById("searchField").onKeyDown = function(event) {
        var holder;
        if (window.event) {
            holder = window.event.keyCode;
        } else {
            holder = event.which;
        }
        keyPressed(holder);
    }
}

function keyPressed(key) {
    if (key == 13) {
        event.cancelBubble = true;
        return false;
    }
}

Answer 1

Если элемент input находится внутри формы, и эта форма фактически не отправляется на сервер, удалите форму.

Причина, по которой ваш код не работает, потому что onkeydown событие должно быть в нижнем регистре, и вы на самом деле ничего не возвращаете в него (попробуйте return keyPressed(holder); - или просто переместите keyPressed код функции в setupSearchField, поскольку мне кажется бессмысленным иметь его в качестве отдельной функции).

Answer 2

Это происходит, когда есть только один ввод текста, независимо от того, имеет ли ваша кнопка (если есть) type="submit" или нет. Это задокументировано здесь. http://www.w3.org/MarkUp/html-spec/html-spec_8.html Таким образом, как было предложено ранее другими людьми, вам нужно просто остановить это поведение по умолчанию.

Answer 3

Просто добавьте следующий код javascript на страницу Visualforce:

<script type='text/javascript'>
function stopRKey(evt) 
{
   var evt=(evt) ? evt : ((event) ? event : null);
   var node=(evt.target)?evt.target:((evt.srcElement)?evt.srcElement:null);
   if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}

document.onkeypress = stopRKey;
</script>

Answer 4

Ваше поле поиска находится внутри элемента? Затем, нажав "enter", запускается событие submit для элемента формы.

В этом случае вы можете обработать свою фильтрацию, определив onsubmit в элементе формы.

<form id="searchForm">
    <input type="text" name="search" />
</form>
<script>
    document.getElementById('searchForm').onsubmit = function() {
        var searchValue = this.search.value;
        // process
        return false;
    }
</script>

Может быть, как-то так.