I am working on a mobile web based form for iOS/Android browsers. Everything works fine functionally.
What I can't seem to do is keep the keyboard on top AFTER the User presses the 'Submit' button on the form. Currently, as soon as I tap 'Submit' the keyboard hides by default. I have tried whatever I could think of before posting this request here.
My code:
<form action="" onsubmit="return false;">
<input id='chat' type="text" name="message" value="" data-inline="true" placeholder="Start typing your message here" />
<button id='doSend' type="submit" data-inline="true">Submit</button>
</form>
Am testing this with jQueryMobile 1.0 beta2 + iPhone 4.
Any ideas are appreciated. Thank you.
Try adding focus back to the '#chat' field on a callback / after your submit has completed.
$('#chat').focus();
Here is a demo I created that simulates the functionality (tested on iPhone)...
Demo: http://jsfiddle.net/wdm954/hYn7k/1/
Related
When focus is placed into an input of this form, iPhone shows input keyboard and Go button, which acts as submit. Is it possible to change the label to e.g. "Create"? I tried value, title or name but none of those work.
<form>
<input name="foo" type="text"/>
<input type="submit" name="Create" value="Create" title="Create"/>
</form>
No, something like this is not possible.
I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed.
Is there a way not to dismiss it when pressing Enter?
I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.
I just had this problem too.
My problem was that i had a close button in my modal
<button class="close" data-dismiss="modal">×</button>
Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).
<a class="close" data-dismiss="modal">×</a>
Without seeing your source, I can't confirm that your cause is the same though.
Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
This applies for all the buttons you have in the modal.
<button type="button" class="close" data-dismiss="modal">×</button>
I had this problem even after removing ALL buttons from my Bootstrap Modal, so none of the solutions here helped me.
I found that a form with a single text field would cause the browser to do a form submit (and result in dismiss), if you hit Enter while keyboard focus is on the text field. This seems to be more of a browser/form issue than anything with Bootstrap.
My solution was to set the form's onsubmit attribute to onsubmit="return false"
This may be a problem if you are actually using the submit event, but I'm using JS frameworks that generate AJAX requests rather than doing a browser submit, so I prefer disabling submit entirely. (It also means I don't have to manually tweak every form element that might trigger a submit).
More info here: Bootstrap modal dialogs with a single text input field always dismiss on Enter key
I had same problem, and i solved it with
<form onsubmit="return false;">
but there is one more solution, you can add dummy invisible input, so your form would look like this:
<form role="form" method="post" action="submitform.php">
<input type="text" id="name" name="name" >
<input type="text" style="display: none;">
</form>
You can put the login button before the cancel button and this would solve the issue you are having as well.
<div class="modal-footer">
<button type="submit" class="btn primary">Login</button>
<button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
I had a similar experience just now and the way I solved it was instead of using a tag, I changed the tag to an tag with type="button". This seemed to solve the problem of pressing the "enter" key and dismissing the bootstrap modal.
I had this problem too and I solved it this way. I added onsubmit to form. I also wanted to be able to use enter key as a saving key so I added save_stuff() javascript to onsubmit. return false; is used to prevent the form submit.
<form onsubmit="save_stuff(); return false;">
...
</form>
<script>
function save_stuff(){
//Saving stuff
}
</script>
In IE 7 the zip code search form on my page reacts differently when someone clicks submit vs pressing enter. It works correctly when sumbmit is clicked and incorrectly when enter is pressed.
http://getridofit.com
<form name="zip" action="<?php bloginfo('url'); ?>" method="get">
<input type="text" id="zipper" name="locations" size="5" maxlength="5" class="junk-input" onsubmit="return checkForm()" />
<input type="submit" value="" name="schedule" src="/wp-content/uploads/remove-my-junk.png" align="center" class="junk-button" style="background: #f67a3e url(/wp-content/uploads/remove-my-junk.png); border: none; width: 201px; height: 45px;"/>
</form>
The correct result for a zip search of 85718 looks like this: http://getridofit.com/l/85718/?schedule
but pressing enter produces a result like this: http://getridofit.com/l/85718/
Because the button wasnt clicked in order to submit the form. If you dont click the button then the input for #name[schedule] isnt sent. However if that button input has focus when enter is pressed i think it will send it along properly... You might jsut want to make schedule a hidden input.
It looks like you are checking for the presence of the submit button variable (schedule) in the URL bar. The submit button variable is only supposed to be submitted when the user physically clicks the the submit button. However, I can't reproduce the problem in Safari, so it may also depend on what your JavaScript is doing when the form is submitted.
I've noticed navigating in websites like Dell or Google, that typing in their search text box with iPhone, in the keyboard appears a blue button 'Search' instead of the standard 'Go' button that appears on any normal form.
What should you do to display the search button?
having type="search" is usually all you need to make software Search keyboard appear however in iOS8 it is mandatory to have a wrapping form with action attribute.
So the following code would have a software keyboard with “Return” button
<form>
<input type="search" />
</form>
But this code should have blue “Search” button instead
<form action=".">
<input type="search" />
</form>
You can influence this behaviour with:
<input type="search" />
JS Bin demo
Ignore the submit button's text being 'kettle,' I just wanted to be sure that it wasn't the submit button influencing the text of the iOS keyboard...
This is, of course, backwards compatible since a browser that doesn't understand type="search" will default to type="text", which is useful for creating forward-planning html5 forms.
I was not able to get the search button with
<input type="search" />
However, I did get it to appear with
<form>
<input name="search" />
</form>
On iOS 8 you can enable the blue "Search"-button on the keyboard by doing one of:
add input name=search
add input type=search
add id to input with the case sensitive word "search" in the ID, for
example the-search or thesearchgod
In HTML5 standard, adding enterkeyhint attribute on the input is the proper way to change the label on the virtual keyboard
<input enterkeyhint="search" />
If no enterkeyhint attribute is provided, the user agent might use contextual information from the inputmode, type, or pattern attributes to display a suitable enter key label (or icon).
See MDN Docs about enterkeyhint
When using #Anton Bielousov suggested solution, this also changes the styling of Android Devices. To counter this I had to:
Add form around input.
Add type="search"
Add name containing search
Add styling to counter the unwanted android styling
Android styling:
input[type=search] { -webkit-appearance: none; }
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
<form action="" class="search-bar__form-form">
<input
class="search-bar__input"
name="search-bar"
type="search"
/>
</form>
The keyboard is handled by the operating system (iOS) and cannot be directly altered. The type of input required determines the type of keyboard to display.
If the website in question is HTML5, then #David's answer is valid.
I have a piece of code like this.
<form method="get" action="{$self}" name="addcommentform">
<textarea title="{$enterComment}" name="comment" class="commentarea" </textarea>
<input class="Button" type="submit" value="{$postComment}" />
</form>
How do I keep track of when what is the text entered in the form's textarea when the user navigates away from the page? I want to prompt the user with a warning message so he/she doesn't lose the text.
Thanks.
You could use the javascript/jquery blur event, and if the user hasn't clicked the desired button have it display the form values. This might help JQuery Blur Validation Problem
Stu
Take a look at this Javascript code snippet:
http://www.boutell.com/newfaq/creating/disableclose.html
This takes advantage of the window's onbeforeunload event which fires when the user is about to leave the page.