Refreshing page after hiting enter key in single text input outside form tags

0
votes

I have one field in HTML. When I have it focused and hit enter key, page reload. I really don't know why. It is not inside a forms tag - I can't use form tags ....

I use AngularJS.

HTML:

<div class="search-input">
    <input type="text" ng-model="q.searchPhrase" id="menu-search-input" placeholder="Search expression ..." />
</div>
<div class="search-submit">
    <button ng-click="search()" type="button">Search</button>
</div>

EDIT 1:

search() function is not important, because it is fired on click event and it works as I except, when I click the Search button.

Tag button submits a form, when it has attribute "submit", I think. However, I use a div instead a button tag, but it still reloading the page in text input when I hit enter.

EDIT 2:

Search function is not important - inside is only a console.log();

3
javascripthtmlangularjsformsinput
I'm not familar with angular but could it be that angular creates the html form dynamically? Check browser tools like rightclick/inspect element, maybe theres a dynamic form from angular. Its normal browser behavour that ENTER in a field submits a form. You can omit that by returning false "onkeypress" (or similar event) when the ENTER keycode is pressed. – Gunnar
Could you provide your search function ? – korteee
Html is totally fine. It doesn't reload in my case with same HTML content. Please provide search(). – Ajay Verma

3 Answers

0
votes

tag button submits the form by default, you could use a instead

<div class="search-submit">
    <a ng-click="search()">Search</a>
</div>
0
votes

You could use input instead

<input type="button" ng-click="search()">Search</input>
0
votes

I create a JS function:

function bugFix() {
    if (window.event.keyCode == 13) {
        console.log("ENTER PRESSED");
        window.event.preventDefault();
        window.event.stopPropagation();
        return false;
    }
}

Add event call to input:

<input type="text" onkeydown="bugFix()" ng-model="q.searchPhrase" id="menu-search-input" placeholder="Search expression ..." />

And it works. In IE, it was fine before this fix function, but Chrome reloads the page everytime when enter was pressed.