I'm making an intranet application and experimenting with the Jeditable plugin for jQuery. The following function makes an element (in this case a td element) clickable, which then turns it editable (again in this case selectable, as it's a select box) and checks a key listener to see if tab or shift-tab has been pressed to activate the next or previous editable area.
$('.editBool').editable(function(value, settings){
// show and hide clickable links. shouldn't be important to problem,
// but i don't know at this point
$(this).parent().find('a.editbutton').hide();
$(this).parent().find('a.savebutton').show();
$(this).parent().addClass('notSaved');
// sets a warning if they leave the page without saving edited data
window.onbeforeunload = savePage;
// needed for editable to work (apparently).
return(value);
}, {
data : "{'Yes':'Yes','No':'No'}",
type : 'select',
onblur : 'submit',
callback : function(value, settings) {
// kp is the keypress, sp is a bool checking for the shift key
if (kp == 9){if (sp){$(this).prev().click();}else{$(this).next().click();}kp = null;}
}
});
If I tab through the Jeditable boxes with code like this, I have no problems, until I move the mouse in Internet Explorer (7 and 8). If the currently selected element is a select box (using the code above), when the mouse moves, the select box loses focus and triggers the onblur event. If the mouse doesn't move, focus stays with the select box.
If I use the cursors to try to select another value, focus is lost as well, and again the onblur event is triggered.
This does not happen with any other kind of element I've set as Jeditable (textarea, autogrow textarea, masked text), just on selects, and only in IE 7-8 (maybe 6 as well, but I don't care about 6 anymore). It works as I expect it to work in FF3, Chrome 4+, Opera 10 (focus stays on select box when mouse moves and options can be selected by keyboard arrow commands).
Does anyone have any ideas about why this might be happening?
Thanks.
Clarification time: This bug only happens when using a next() function to go from a jeditable enabled td set to change to text, textedit or autogrow on click, to a jeditable enabled td set to a select box. It doesn't happen when going from text to text, or select to text.
More detail time: The bug is happening when the focus() is called in the jeditable jQuery plugin, line 253:
$(':input:visible:enabled:first', form).focus();
It seems if the mouse is moved after this line, it causes the select box to lose focus. This is driving me nuts, and as I want to solve this one, I've been attacking it every which way I can. I came across a curious oddity by swapping the previous line for this one:
setTimeout(function() { $(':input:visible:enabled:first', form).focus();}, 1000);
During the second between the select box being created and the focus set, if the mouse moves, focus is not lost once set. If the mouse does not move before focus is set, when it does move, focus is lost. This appears to be total fruit and nuttiness. I've been googleing the hell out of this issue, and can't find a solution. Any help would be very much appreciated.
Thanks,
Related
I had an issue with the select2 multi-select on mobiles. The keyboard kept appearing. The fix was to remove auto focus on the search input box to drop straight in to the picklist - see https://jsfiddle.net/yw61h28z/
Now the issue is, if I want to use the input as a search (click in input twice to gain focus) start typing I only manage to type one character before it loses focus due to the picklist opening. When the picklist opens the first fix is applied to lose focus. Not sure what I can do here - maybe add a delay when typeing. Or only apply this:
$("#dataCombo").on('select2:open', function (e, i) {
$(document.activeElement).blur()
});
on click and exclude from when a user types?
I have input field in HTML with number text which has a dots i.e "1.00.1". If I double click on this field in IE or firefox, browser select only a part of the text (between the dots), but in Chrome double click select the whole text in this field.
What is the best way to change this behavior in Chrome? If I have only text (ie "test.test") in input fields, double click with selection in Chrome works the same like IE and Firefox.
It should be possible but complex. First you have to detect cursor position on click (first click of the dblclick), store it and use it in dblclick (second click) :
Get cursor position (in characters) within a text Input field
Here your problem will be to not trigger the click on dblclick, because it will change the cursor position wich is wrong (reset cursor pos to 0). I tried but this is gonna be hard to manage :
http://jsfiddle.net/n2rzyxvg/3/
jQuery(document).on('click',"#input",function(){
var clickpos = jQuery(this).getCursorPosition() ;
jQuery(this).data('clickpos',clickpos) ;
console.log("Click ! " + clickpos) ;
});
jQuery(document).on('dblclick',"#input",function(){
console.log("DblClick ! " + jQuery(this).data('clickpos')) ;
});
There is a way but it's not perfert (does not respect the OS behavior of dblclick, it set a custom timeout to imitate dblclick) :
Jquery bind double click and single click separately
If you can manage to get the cursor position on dblclick, you will then just have to find your first and last character position where you want jQuery to start/stop your selection :
Selecting Part of String inside an Input Box with jQuery
I can't help you much more but the difficult part here is the dblclick triggering click, the second part should be easier.
Hope this can help
HF
I am trying to set a few input field connectd to each other.
in the 1st field you can enter 3 digit
in the 2nd field you can enter 3 digit
in the 3rd field you can enter 4 digits
When i the first field as 3 digits, i would like to have the focus move to the 2nd one and same for the moving to teh 3rd one.
Using not so smart javascript it ie working, however on iPhne there is an issue: whene the focus is moved to the 2nd field, althouth i manage to create and trigger different events on eh field, the on screen keyboard do not want to reappear.
I tried to use simple focus() method.
Then to create and dispatch focus event, click event touchstart event, touch end event but i di dnot manage to figure out how to make the browser show the keyboard.
Is there anyone out there with an idea how to do this?
HELP
Thx
Daniel
An element.focus() should show the keyboard. You must be doing something wrong. Additionally if all your input / text areas are in a form element it should auto advance to the next element. You can also use element.blur() to hide the keyboard.
Is it possible to control the display i.e.(show/hide) of keyboard in iPad Safari through code?
I have 2 form fields;
1. Text box (say Name)
2. Select list/Dropdown (Say State)
My question is when user moves focus from Name to State, the keyboard is still there..Why is it so and how can I hide the keyboard when focus moves to dropdown?
Thank you.
I just ran into a very similar problem, not sure if my solution will work for you.
In my case, I have a text input inside a form. On submit, I'm using e.preventDefault() to stop the page from navigating. I believe this was also having the effect of stopping the default action of hiding the keyboard.
To solve this, I added an explicit input.blur() when the form is submitted. This seemed to be enough for safari to remove the keyboard.
Hope this helps!
I had the same issue. I had a form were keyboard should be collapsed when type out of the field (not native behavior on ipad) and when focus select field. The only solution for me was creation of hidden input
<input type="hidden" id="blurInput" />
and javascript code handler for focus event:
$element = $(event.target);
if($element.is('select')) {
$('#blurInput').blur();
$element.focus();
}
In case you want just to blur input field another solution works perfect, but between input and select it fails
document.activeElement.blur();
$('input').blur();
I am developing an HTML code editor using simple DIV's and capturing events. When I use this on the iPad the keyboard never pops up since i'm not technically in an editable field.
Is there a way to programatically tell the iPad that I need a keybaord?
If your code is executed via something that was initiated via a user action then it will work.
E.g;
this works (pops keyboard):
<input type='text' id='foo'><div onclick='$("#foo").focus();'>click</div>
this doesn't work (input gets a border but no keyboard pop):
<input type='text' id='foo'>
<script>
window.onload = function() {
$("#foo").focus();
}
</script>
To make the keyboard show on iOS devices you need to focus on an editable element such as an input or a textarea. Furthermore, the element must be visible and the .focus() function must to be executed in response to a user interaction such as a mouse click.
The thing is - we DON'T want the input element to be visible..
I have fiddled with this for quiet some time and eventually got the result I was looking for.
First, create an element you want to use to show the keyboard - in this case a button, and a hidden input element: (Working jsFiddle or Test on a mobile device)
<button id="openKeyboard">Open Keyboard</button>
<input id="hiddenInput" style="visibility: hidden;">
Then use the following javascript:
document.getElementById('openKeyboard').addEventListener('click', function(){
var inputElement = document.getElementById('hiddenInput');
inputElement.style.visibility = 'visible'; // unhide the input
inputElement.focus(); // focus on it so keyboard pops
inputElement.style.visibility = 'hidden'; // hide it again
});
Notes:
I have noticed that iOS safari will automatically scroll and zoom to the area of the input so make sure you use proper viewport and position your input element in a relevant location.
You can use some CSS on your input like setting the opacity, height and width to 0. However, if your input is completely hidden this won't work again, so make sure you leave the padding or border just so there's something to be rendered (even though it won't show up due to the opacity). This also means you shouldn't use display:none to hide it, hidden elements are just not allowed to be focused.
Use the regular keyboard events (keydown, keypress, keyup) on your hidden input to access the user's interaction as you would normally do. Nothing special here.
Place a transparent textarea over the contentEditable div. The keyboard will open, as soon as the user focus the textarea.
Register an event listener on the textarea for the focus event and set the visibilityof the textarea to hidden. This prevents the blinking cursor.
Set the visibility of the textarea back to visible after the blur event occurred.
Register additional event listeners for keydown, keyup, keypressevents and process theses events the same way, as you process them in the contentEditable div.
I have found that calling prompt("Enter some value") does trigger the keyboard on my iPad 2. Not sure if this is helpful in your situation or not.
The answers to this questions suggest that it's not possible: Why doesn't #contenteditable work on the iPhone?
A colleague of mine who was working on a similar project ended up using a textarea for the iPad version of his editor, and contenteditable divs/spans for browsers that support contenteditable. Perhaps something similar would work for you.
Proxy input trick
I figured out another dirty workaround, but works well.
The trick is based on the fact, that if the keyboard is already open, changing the focus will not close the keyboard.
Add a small "proxy invisible input" in top left of the page with position fixed (the fixed position prevents the flicker, also make sure that the field has font-size bigger than 16px to prevent iOS page zoom on focus)
On clicking the button, just .focus() on this invisible field. The keyboard will open...
Show or render your other input fields
Now with the keyboard open just .focus() on the desired input. You can use small setTimeout delay, for example 500ms if needed
Here's a solution for you:
<input id="my-input" type="text" />
<script type="text/javascript">
var textbox = document.getElementById('my-input');
textbox.select();
</script>