I'm using Jquery Mobile to develop an web app for Android and iPhone. I want to handle the event when the users change their value in the input text field.
Initially, I use .on("keyup change") and everything seem to work ok. However, when the users paste some text on the text field (by holding and tap on the "Paste"), my event handler is not called.
Please help me if you know how to solve this problem.
Thank you all.
Works on all browsers but not on FireFox.
Demo
$('input').on('paste', function (e) {
if (e.originalEvent.clipboardData) {
var text = e.originalEvent.clipboardData.getData("text/plain");
$('p').empty();
$('p').append(text);
}
});
Credit goes to: jQuery Detect Paste Event Anywhere on Page and "Redirect" it to Textarea
For Android add a timeout as it is in this example http://ajax911.com/numbers-numeric-field-jquery/
For iPad add event 'change' together with paste, worked on iphone
Here is what worked for me on mobile Safari and Chrome.
if (document.getElementById('search_input')) {
document.querySelector('#search_input').addEventListener('paste', (e) => {
let pasteData = (e.clipboardData || window.clipboardData).getData('text');
pasteData = pasteData.replace(/[^\x20-\xFF]/gi, '');
window.setTimeout(() => {
//do stuff
});
});
}
Related
I am trying to create my website in Material Design, however I found one issue with Material Select regardless whether I use MDB (Material Design for Bootstrap) or Materialize CSS framework. Both are working fine on Windows/OSX/Android , however for some reason when I open Material Select component on my iPad and click on it, there is a blinking cursor showing from the Background of the Dropdown.
Try the following code:
input.select-dropdown {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
I had the same issue on iOS devices, I am using select dropdown from materialisecss "http://materializecss.com/forms.html".
to fix the blinking cursor issue, I used reference code from below link and slightly modified that code.
Ref Link: https://github.com/Dogfalo/materialize/issues/901 (check comment by "chi-bd commented on 17 Nov 2015")
jQuery('select').material_select();
/*--- Materialize Select dropdown blinking cursor fix for iOS devices ---*/
jQuery('select').siblings('input.select-dropdown').on('mousedown', function(e) {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
e.preventDefault();
}
}
});
jQuery('select').material_select(); to initialize materialise select and rest code is the fix.
the only problem was this was giving problem on desktop view so added mobile detection condition
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Note: Add this code in document ready $(document).ready(function() { ... });
that's it. I hope this will sort out your issue.
Regards, and have a nice day :)
There is an open issue on github, #StaticBR proposed an approach to solve "Dropdown Broken on iPhone (and Safari in general)" issue, link here.
According to #StaticBR,
"The Issue is that IO13 Safari propagate TouchEnd Events before the Click event is propagated.
So if you have a click listener within an drop down, it is not correctly triggerd, because the Dropwdown is getting closed by the TouchEnd event. After that the click event is at a different position or does not longer exist.
Removing the touch event listener solved this issue for me."
Apologies, the above code works but then it stops the scrolling for drop-down.
For now I am using below fix, but it shows the blinking cursor first and then it hides it. but still this is not the perfect solution, if anyone has better solution please post here :)
function checkDropDown(obj){
var nextObj = jQuery(obj).next();
setTimeout(function(){
if (jQuery(nextObj).is(":visible")){
jQuery("input.select-dropdown").css({
"transition" : "none",
"left" : "-999999px"
});
}else{
jQuery("input.select-dropdown").css({
"left" : 0
});
}
}, 250);
jQuery(document).ready(function(){
jQuery("input.select-dropdown").on("focus", function(){
checkDropDown(jQuery(this));
});
jQuery("input.select-dropdown").on("blur", function(){
checkDropDown(jQuery(this));
});
});
I'm looking for a way to prevent select2's search-input being automatically focussed when the select2-dropdown is opened. I know this is select2's intended default behavior - and while this is fine for desktop clients, I need to prevent this behavior for the iPad where it triggers the iPads software keyboard, which is not what we want as a default.
I've searched for an option to do so with no luck.
http://jsfiddle.net/KwW5n/2/ reflects our setup - we're using a simple -element as a base for our select2-functionality:
$('#source').select2();
This worked for me on select2 v4:
// keep search input, but avoid autofocus on dropdown open
$('#research .filter').on('select2:open', function (e) {
$('.select2-search input').prop('focus',false);
});
credit goes to this github comment
Sometimes select2 "steals" focus from other elements. After messing around for quite a bit, I just used this solution below.
At the very end of the event handler for the YourSelect2.on('change', function(){
setTimeout(firstInputFocus, 300);
}
function firstInputFocus() {
$("YourSelect2").focus();
}
By setting this slight delay it works. I am able to change focus away from the dropdown. Following the "change" event for select2, it does something internal to the select2 code which prevents you from IMMEDIATELY changing focus. Inserting this slight delay did the trick for me at any rate.
Ok, I am not sure if changing the focus is possible unless you change the select2 script itself (I could be wrong about this though). As a workaround what you could do is hide the search box by setting minimumResultsForSearch property to a negative value.
<select id="test">
<option>1</option>
<option>2</option>
</select>
And then:
$(document).ready(function() {
$('#test').select2({
minimumResultsForSearch: -1
});
});
Fiddle
None of the solutions posted here worked for me so I did this work around:
This will make the search input readonly when opened (prevents keyboard on mobile), then when you click the input it removes readonly and opens keyboard.
$('#myselectbox').select2({placeholder: "Select Something"}).on('select2:open', function(e){
$('.select2-search input').attr('readonly',true);
});
$('body').on('click', '.select2-search input', function(){
$(this).attr('readonly',false);
});
The only 'solution' I found is to remove .select2-input and .select2-focusser right after creation of the dropdown. This only works fine when you don't need the input field for searching, e.g. when the list is short enough.
Removing only .select2-focusser at least prevents the keyboard from popping up when an option was selected.
If you want to disable the searchbox and also the auto focus as a text input, e.g. preventing ios browsers to scroll-in the keyboard, use this code:
$('select').select2({});
// will remove the searchbox and focus initially
$(".select2-search, .select2-focusser").remove();
// will remove the searchbox and focus on selection/close
$('select').on('select2:closing', function (e) {
$(".select2-search, .select2-focusser").remove();
});
Although #Choma's answer is fine, it will alter the select2 default behavior on both desktop and mobile devices.
I had to find a solution for a responsive website: prevent the auto-focus of the search input only on mobile devices, and keep the default behaviour on desktops.
In order to detect the mobile devices, I've used Modernizr library, which can test for the existence of Touch Events in the browser.
We can use Modernizr.touch on Modenizr v2, which will return true if touch events are supported, or false otherwise.
So we can modify #Choma's answer like this:
$('select').on('select2:open', function() {
if (Modernizr.touch) {
$('.select2-search__field').prop('focus', false);
}
});
Demo:
https://codepen.io/andreivictor/full/QmKxOw/
Tested on:
Desktop: IE 11, Chrome, Firefox, Opera, Safari
Android 4.2.2
Android 5.0.1 (Samsung Galaxy S4)
Android 6.0.1 (Samsung Galaxy S7 Edge)
iOS 11.2.5 (iPhone 8)
iOS 10.3.2 (iPhone 6 Plus)
iOS 10.3.2 (iPad Mini 3)
I got JQuery's "too much recursion" error in the console when using Choma's solution.
The following worked for me for v4:
// keep search input available, but avoid autofocus and thus mobile
// keyboard appearing when dropdown opens.
$('body').on('select2:open','#subject', function (e) {
$('#modal .select2-search input').attr('readonly',true);
$('#modal .select2-search input').click(function(ev){
$('#modal .select2-search input').attr('readonly',false);
});
});
As you can tell this select2 field is on a modal with the id modal and the select2 field itself has an id of subject. Of course change the selector to what's appropriate for your own code.
It basically adds a readonly attribute to the input when the select2 field opens preventing a mobile keyboard from appearing, and then removes it when the search field is clicked/pressed on allowing the keyboard to appear only then.
Following trick worked for me. You can disable input search field of select2 element :
$('select').on('select2:opening', function() {
$('.select2-search__field').attr("autocomplete", "new-password");
});
setTimeout(function(){ $('.select2-search__field').attr("autocomplete", "new-password"); }, 2000);
maybe someone need~
I've tried this and it works~
$('#selectID').on('select2:opening', function (e) {
e.preventDefault();
});
The solution worked perfectly for me. tested on mobile
// prevent auto-focus on select2 search input
$('select').on('select2:opening', function(e) {
$('.select2-search input').prop('focus', 1);
});
http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text
jQuery UI 1.10 made it so that the dialog title can only be text (no html) to prevent scripting vulnerabilities. I'm not allowing user input to generate this title, so I would still like to use HTML, mainly to display an icon to the left of the title.
I'm going to post my solution to this problem because I haven't seen anyone else ask or answer this yet. Hopefully it will help someone else, or someone else may have a better approach.
More info as to why they did it: http://bugs.jqueryui.com/ticket/6016
This will override the function used when setting jQuery UI dialog titles, allowing it to contain HTML.
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
if (!this.options.title ) {
title.html("Â ");
} else {
title.html(this.options.title);
}
}
}));
If you hesitate to override jQuery's _title method, you can use the html, append, or similar methods on the title element at the jQuery dialog's open event, like so:
$("#element").dialog({
open: function() {
$(this).find("span.ui-dialog-title").append("<span class='title'>" + subtitle + "</span>");
}
});
The above parses the HTML correctly while bypassing jQuery's title method. And since it happens at the open event, the user experience remains seamless. Just did this on a project, and it worked beautifully.
This will modify the title after init the dialog
$('#element').dialog(options);
var dialogTitle = $('#element').closest('.ui-dialog').find('.ui-dialog-title');
dialogTitle.html('<strong>hello world</strong>');
It took me a little bit, but I figured out that I can't click on my inputs because of the touch.punch script I'm using to enable jquery UI drag functionality on touch devices. Anyone familiar with this script know why that might be? The form actually resides down the tree of the parent object. Does anyone know a way I can override or force through the selection? I'm going to try binding events that force focus to the input right now but maybe someone here has some insight?
JEditable + jQuery UI Sortable + jquery.ui.touch-punch
I have spent all day on this problem and I finally figured out the solution. The solution is very similar to kidwon's answer. However, I was using jeditable which dynamically creates input fields without class names. So I used this conditional statement instead of checking the class name:
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
I think this is a better solution as it always uses the native functionality for any input or textarea fields.
To anyone who might wind up here with a similar situation using the very handy touch.punch hack, simply forcing the focus through on a click event will work just fine!
$('.input').bind('click', function(){
$(this).focus();
});
Folks, the other two answers here did NOT work for me, but Danwilliger's solution works; however, it's not clear from his answer how exactly to set it up in the Touch Punch JS file. For future answer-seekers, here's what to do. Again, this is Danwilliger's solution -- I'm just clarifying.
Change this section in jquery.ui.touch-punch.js (on approximately line 30):
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
To this:
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
Best of luck!
OK here's another solution if your textfield whatever HTML element is ain't focusing,scrolling, selecting words, moving text cursor around the text and whatever different scenarios might come then you may override the jquery.ui.touch.punch.js script.
I assume that your element isn't the draggable one but probably a child of it as my case was.
Put a class on your html element, for example class="useDefault".
Then go to the script file and find that part:
...
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
....
As you can probably see event.preventDefault(); assures that jquery.ui.touch.punch.js
overrides the default behaviors of the browser. To prevent that for our particular class node, make the following modifications:
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
event.stopPropagation();
} else {
event.preventDefault();
}
This solution is tested with webkit browsers only and jQuery UI Touch Punch 0.2.2 release.
Hope that quick solution helps, BR
Thanks to #Danwilliger and #jeremytripp for the solution. Being that this issue has been known for years and yet has still not been worked into touch-punch author's Git repo, I forked it with the solution added here:
https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js
I would be quite happy for the author to incorporate those few lines of a change into the original library and make this one unneeded then, but if that never happens, it's nice to have a single source file to reference.
Jacob's answer worked with a slight modification—I found that using the click event resulted in inconsistent behavior on iPad, ios9 Safari. Sometimes I'd press once on a field and it would focus, other times I had to press three times. Changing click to touchstart solved the problem for me (I also used event delegation since my form was added dynamically):
$('form').on('touchstart', 'input,textarea',function(){
$(this).focus();
});
One solution is to use a handle.
Add an icon inside and use this to drag. Then the inputs work fine.
<li><span class="move">Move</span><input...../></li>
$("#sortableList").sortable({
handle: ".move"
});
I actually tried adding the lines which Danwilliger mentioned, it did not do the trick for me.
What worked for me was
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
$(touch.target).focus();
} else {
event.preventDefault();
}
I am not really sure why the other answers posted did not work, but for anyone else out there if they have the same issue try my solution out :).
Throttlehead's solution worked for me. Simpler perhaps to just use the JQuery selectors to cover all inputs and textareas:
$('input,textarea').bind('click', function(){
$(this).focus();
});
I am having a problem with my jqm form not working properly in mobile browsers (iPad 1 Safari, Android Dolphin) but working as expected in desktop browsers (Chrome, Firefox, Safari & IE9 on Win7).
The form starts by asking the user how they would like to be contacted (email, sms, and/or post), then updates fields to be required based on this selection (validation is via the validationEngine.js plugin).
An example of the form can be seen here.
The logic of the script is that it checks to see if the checkbox is selected (or de-selected), then adds (or removes) a class to make it required as shown below.
$('body').delegate('#byEmail_label', 'click tap', (function(event) {
if (!$("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
})
);
I had this working 100% without the .delegate(), but then I could not have the form load via ajax - after adding .delegate it all works well, except in mobile browsers.
Has anyone experienced something similar, or have any idea how I can get this working?
Thanks
Finally fixed my own problem by moving all my jquery outside the
$(document).ready(function () {...
and into
$('*').delegate('body','pagecreate', function(){...
ie:
$('*').delegate('body','pagecreate', function(){
$('#byEmail_label').tap(function(event) {
if ($("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
});
});
Now my head feels better... no more banging it on the desk...
I also had troubles with checkboxes and radios, this is what I used. Might help to check for the value instead of if it's checked.
alert($('input[name=byEmail]:checked').val());
or
var cb_val = $('input[name=byEmail]:checked').val() == true;
or
var cb_val = ($('input[name=byEmail]:checked').val() == 'blah') ? true:false;
Maybe something like this
var addValidation = ($('input[name=byEmail]:checked').val() != '') ? true:false;
if(addValidation) {
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
} else {
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}