Virtual Keyboard disappears when touch on input:text iscroll4 - html

keyboard pops up and goes down when clicked on input text.
i'using iscroll 4 cordova 1.6 technologies.
when user touches a text input the keyboard pops up and disappears from the screen
does any1 hav solution for it
thanks in advance


the problem is that ....app is able not focusing on the text area ....whenever user click on text area ...
The solution is document.getElementById('id').focus();
id of text field.


well for that you need to modify iScroll.js
1) take iScroll v4.1.9
2) change code for "onBeforeScrollStart" line #100 to this
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
3) change code for "_start" line #317 add this code
_start: function (e) {
if (e.target && e.target.type != undefined) {
var tagname = event.target.tagName.toLowerCase();
if (tagname == "input" || tagname == "button" || tagname == "textarea") {// stuff we need to allow
return;
}
}
var that = this,
point = hasTouch ? e.touches[0] : e,
matrix, x, y,
c1, c2;

Related

How do I check if the user is typing in a text field?

How would you check if the user is typing into a text input (Flex TextArea, TextInput, RichEditableText)?
In my AIR app I want to listen for keyboard events on the application but I only want to respond if they are not typing into a text field and if no other component handles it.
For example, I want to listen to the A key and run a command. But only if they are not typing into a text field.
FYI I added a NativeFlexMenu and added keyboard modifier to it for A and it is capturing the key event even when the user is typing in a text field.

This appears to work when added to the application. The one problem with this is that if a text field has focus it will continue to have focus even if you click on the application. I might try to add an click event handler to change focus.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication keyUp="application1_keyUpHandler(event)"
keyDown="application1_keyDownHandler(event)">
</s:WindowApplication>
protected function application1_keyDownHandler(event:KeyboardEvent):void {
var keyCode:int = event.keyCode;
var applicable:Boolean;
var focusedObject:Object;
var target:Object = event.target;
if (keyCode==Keyboard.A ||
keyCode==Keyboard.B ||
keyCode==Keyboard.C) {
if (!event.controlKey && !event.commandKey) {
applicable = true;
}
}
if (!applicable) return;
focusedObject = focusManager.getFocus();
if (focusedObject is Application || event.target is Stage) {
isApplication = true;
}
//var t:int = getTimer();
if (target is RichEditableText ||
focusedObject is IEditableText ||
focusedObject is SkinnableTextBase ||
focusedObject is TextField ||
focusedObject is FTETextField ||
focusedObject is FlexHTMLLoader ||
focusedObject is ComboBox) {
applicable = false;
}
//trace("time:" + (getTimer() - t)); takes 0 ms
if (applicable) {
if (keyCode==Keyboard.A) {
// do something
}
else if (keyCode==Keyboard.B) {
// do something
}
else if (keyCode==Keyboard.C) {
// do something
}
}
}

use tab-indent when tab button is pressed in textarea but it is going to next element in html

<textarea></textarea>
This is the code i just need an output in which whenever tab is placed it indent to right.. but pressing tab do something else

Please see the following example: http://www.jqversion.com/#!/liDxmDg
you can use a jQuery code to accomplish that:
$(document).delegate('textarea', 'keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ "\t"
+ $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + 1;
}
});

Navigating Windows Phone 8 Pivot

While working on Windows Phone 8 app, we need to restrict user on navigating pivot.
For example, only first two items are available until user make his selection on second item, then third is unlocked, and so on.
I've tried several approaches, and all of them stumble on one thing - setting pivot.SelectedIndex (or pivot.SelectedItem) inside event handler does not changing visual representation of pivot.
What is missing in my approach?
Here is sample code, from one of variants I've tried...
private void ReservationPivot_UnloadingPivotItem(object sender, PivotItemEventArgs e)
{
if (previousSelectedIndex != ((Pivot)sender).Items.IndexOf(e.Item) && !pivotRedirect)
previousSelectedIndex = ((Pivot)sender).Items.IndexOf(e.Item);
else if (previousSelectedIndex == ((Pivot)sender).Items.IndexOf(e.Item))
return;
object tmp;
PhoneApplicationService.Current.State.TryGetValue("PickupAddress", out tmp);
if (e.Item == ((Pivot)sender).Items[1] && tmp == null && !pivotRedirect)
{
MessageBox.Show("Please, select pickup point!");
pivotRedirect = true;
((Pivot)sender).SelectedIndex = previousSelectedIndex;
((Pivot)sender).SelectedItem = ((Pivot)sender).Items[1];
return;
}
PhoneApplicationService.Current.State.TryGetValue("DropOffAddress", out tmp);
if (e.Item == ((Pivot)sender).Items[2] && tmp == null && !pivotRedirect)
{
MessageBox.Show("Please, select dropoff point!");
pivotRedirect = true;
((Pivot)sender).SelectedIndex = previousSelectedIndex;
((Pivot)sender).SelectedItem = ((Pivot)sender).Items[2];
return;
}
if (pivotRedirect)
{
if (((Pivot)sender).SelectedIndex != previousSelectedIndex)
{
pivotRedirect = false;
((Pivot)sender).SelectedIndex = previousSelectedIndex;
}
}
}

Dont have access to visual now but did you try set visible of third pivot item to collapsed and change it to visible when user will select dropooff point ?

How can I limit tab order to only the controls within a form/div?

I want to replicate the effect that this dialog shows:
http://jqueryui.com/dialog/#modal-form
On this page, if you click on "Create new user", it pops a form with some controls. The effect I want to replicate is that when you tab around in this dialog, the tab order cycles only within the controls on that tab, and never to the controls and other selectable elements outside the dialog. I can't quite see how they are doing it. Can someone please explain?

I found that this behaviour is controlled by javascript. jqueryui binds to the keydown event in dialogs:
this._on( this.uiDialog, {
keydown: function( event ) {
if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE ) {
event.preventDefault();
this.close( event );
return;
}
// prevent tabbing out of dialogs
if ( event.keyCode !== $.ui.keyCode.TAB ) {
return;
}
var tabbables = this.uiDialog.find(":tabbable"),
first = tabbables.filter(":first"),
last = tabbables.filter(":last");
if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) {
first.focus( 1 );
event.preventDefault();
} else if ( ( event.target === first[0] || event.target === this.uiDialog[0] ) && event.shiftKey ) {
last.focus( 1 );
event.preventDefault();
}
},
Basically, this allows looping around in the dialog by the tab key.

JQuery SVG making objects droppable

I am trying to build a seating reservation web app using SVG. Imagine, I've created rectangles in the svg, which represents an empty seat. I want to allow user to drop an html "image" element on the "rect" to reserve the seat.
However, I couldn't get the droppable to work on the SVG elemnets. Any one has any idea why this is so? Here is the code:
$('#target').svg();
var svg = $("#target").svg('get');
svg.rect(20, 10, 100, 50, 10, 10, { fill: '#666', class: "droppable" });
$('rect')
.droppable({
accept: '.product',
tolerance: 'touch',
drop: function (event, ui) {
alert('df');
}
}

I looked in to the jQuery-ui source and figured out why it wasn't working with SVGs. jQuery thinks they have a width and height of 0px, so the intersection test fails.
I wrapped $.ui.intersect and set the correct size information before passing the arguments through to the original function. There may be more proportion objects that need fixing but the two I did here are enough to fix my :
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function(draggable, droppable, toleranceMode) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
//Fix droppable
if (droppable.proportions && droppable.proportions.width === 0 && droppable.proportions.height === 0) {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = droppable.proportionsBBox;
}
return $.ui.intersect_o(draggable, droppable, toleranceMode);
};

With jQuery UI 1.11.4 I had to change Eddie's solution to the following, as draggable.proportions is now a function:
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
if (typeof $(droppable.element).get(0).getBBox === "function") {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = function () {
return droppable.proportionsBBox;
};
}
return $.ui.intersect_o(draggable, droppable, toleranceMode, event);
};

If you want to restrict the drop on svg elements to hit on visible content only (for example in polygons) you might want to use this addition to Peter Baumann's suggestion:
$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
draggable.helperProportions = draggable.helperProportionsBBox;
}
if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
if (typeof $(droppable.element).get(0).getBBox === "function") {
droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
droppable.proportions = function () {
return droppable.proportionsBBox;
};
}
var intersect = $.ui.intersect_o(draggable, droppable, toleranceMode, event);
if (intersect) {
var dropTarget = $(droppable.element).get(0);
if (dropTarget.ownerSVGElement && (typeof (dropTarget.isPointInFill) === 'function') && (typeof (dropTarget.isPointInStroke) === 'function')) {
var x = ( draggable.positionAbs || draggable.position.absolute ).left + draggable.margins.left + draggable.helperProportions.width / 2,
y = ( draggable.positionAbs || draggable.position.absolute ).top + draggable.margins.top + draggable.helperProportions.height / 2,
p = dropTarget.ownerSVGElement.createSVGPoint();
p.x = x;
p.y = y;
p = p.matrixTransform(dropTarget.getScreenCTM().inverse());
if(!(dropTarget.isPointInFill(p) || dropTarget.isPointInStroke(p)))
intersect = false;
}
}
return intersect;
};

In case if anyone has the same question in mind, droppable doesn't work in jquery SVG. So in the end, I did the following to create my own droppable event:
In draggable, set the target currently dragged been dragged to draggedObj ,
In the mouse up event, check if the draggedObj is null, if it's not null, then drop the item according to the current position. ( let me know if you need help on detecting the current position)