I've faced up with the following problem:
I have a scroll area which contains list of input text fields.
I use
ontouchmove = function(e){ e. preventDefault(); }
to prevent global scroll of the page. It works fine except cases when gesture begins from input field.
How can I prevent global scroll of the page when first touch traps to the input field?
Thanks.
I believe you want to capture the touchmove event using the addEventListener function so that the even doesn't "bubble". Try this:
/* This code prevents users from dragging the page */
var preventDefaultScroll = function(event) {
event.preventDefault();
window.scroll(0,0);
return false;
};
document.addEventListener('touchmove', preventDefaultScroll, false);
this might help
the section "MORE SPECIALIZED SOLUTION" might be what you are looking for.
Related
I am working on an editable table in Angular application with ag-grid library. I would like to keep editing cells (in full row edit mode) until I finish with it and then close the editors manually via API. The problem is that the editor is closing on other cell click/focus (on some other line) as described here:
The grid will stop editing when any of the following happen:
Other Cell Focus: If focus in the grid goes to another cell, the editing will stop.
I cannot figure out how to disable this, if it is possible. Installing the onCellMouseDown() hook does not help, because the cellFocused event is fired before cellMouseDown. Therefore, the editing stops before I have a chance to intercept the mousedown event.
Here is my stackblitz little extract with related pieces of code.
The need for such scenario is that I want to validate the entry and not to allow a used to quit the editing if the form is not valid. The only workaround I found so far is that on any click outside of editing cells when the editor closing I reopen it right away in onRowEditingStopped() hook unless the editor has been closed via 'OK' button.
After all, I have managed to provide a custom solution that fits exactly into this problem which I was facing also.
First thing is to disable pointer events to non edited rows when a specific row is currently being edited. On Ag-grid's 'cellEditingStarted' callback I have added the following code:
public cellEditingStarted(event: any): void {
//not all rows are on dom ag-grid takes care of it
const nonSelectedGridRows = document.querySelectorAll('.ag-grid-custom-row:not(.ag-row-selected):not(.ag-row-editing):not(.pointer-events-none)');
forEach(nonSelectedGridRows, row => {
row.classList.add("pointer-events-none");
});
}
Because not all rows exist on dom (Ag-grid creates and destroys while you are scrolling )when a specific cell is being edited, I have also added a rowClassRule which is applied when rows are being created:
this.rowClassRules = {
'pointer-events-none': params => {
if (params.api.getEditingCells().length > 0) {
return true;
}
return false;
}
};
scss:
.pointer-events-none {
pointer-events: none
}
By disabling pointer events, when you click on a non edited cell the cell won't get focus and thus the currently edited cell will stil remain on edit mode. You can provide your own custom validation solution and close the editor manually through API. When you are done, you have to enable pointer events to all grid rows back again:
private enablePointerEvents(): void {
//not all rows are on dom ag-grid takes care of it
const nonSelectedGridRows = document.querySelectorAll('.ag-grid-custom-row.pointer-events-none');
forEach(nonSelectedGridRows, row => {
row.classList.remove("pointer-events-none");
});
}
I implemented the same above approach in Ag-Grid React.
I used getRowStyle callback for adding the css pointerEvents: none on dynemic basis.
It seems to be working for me fine.
Please refer the below code
const getRowStyle = (params) => {
// this is not initialized in read mode
// condition for me ==> currentEditRowIndex.current !== null && params.node.rowIndex !== currentEditRowIndex.current
if (someCondition for Row other than inline edit row) {
return { pointerEvents: "none" };
}
return null;
};
After adding this whenver you start the editing..You will need to call redrawRows so that css changes can be applied.
Hope this will help. Thank You!!
Thought I would share another solution that has been working out okay for me so far.
Using 'pointer-events-none' as suggested in the other answer is flawed because the Enter key can also close the editor.
In my case, I want to prevent the editor from closing when client side validation has failed and the data is invalid. When my conditions are met, I call stopPropagation() on the events to prevent the editor close from happening in the first place. It still has potential problems:
It cancels mousedown, dblclick, keydown, focusout and click for all elements that have a class name starting with ag- so if you happen to use this class prefix for other controls on the page, it could interfere. It also means any controls within the grid (sorting, resizing, etc.) don't work while the condition is met.
Calling stopPropagation() could potentially interfere with your own custom controls. So far I've been okay if I dont use the ag- prefix within the markup from my own custom cell editors and renderers
I hope they can add a proper API function to cancel the row/cell stopEditing function in the future.
["mousedown", "dblclick", "keydown", "focusout", "click"].forEach(function (eventName) {
document.addEventListener(eventName, function (e) {
if ( conditionForCancelingIsMet() ) {
// this appears to cancel some events in agGrid, it works for
// preventing editor closing on clicking other cells for example.
// It would be ideal if this worked for all ag-grid specific events
// and had a proper public API to use!
e["__ag_Grid_Stop_Propagation"] = true;
}
// convert element classList to normal js array so we can use some()
var classArray = [].slice.apply(e.target.classList);
if ( conditionForCancelingIsMet() && classArray.some(c => c.startsWith("ag-")) ) {
// unfortunately some events like pressing the 'enter' key still
// require stopPropagation() and could potentially interfere with unrelated controls
e.stopPropagation();
}
}, true);
});
I have a multipage form with more than 40 fields spread over multiple tabs, and grouped in collapsible fieldsets.
Now I have the case that upon form submission, a field is detected as invalid, and I want to find the field for the user, bring it into the visible area and focus it. So I have to switch to the right tab, open the fieldset if applicable, scroll the field into the visible area and focus it.
I would guess ExtJS has a function for this, but I don't find one. My code:
// Get first invalid field. C&P from Ext.form.Basic.isValid function
var invalidField = me.getForm().getFields().findBy(function(f) {return !f.isValid();});
if(invalidField) {
// TODO: Bring the field to front.
// Now focus the field:
invalidField.focus();
Is there a builtin function available?
Ext JS does not provide a built-in method for doing this specifically, but it does provide all of the necessary utility methods and supports animations. At a minimum, ensuring the form is configured as scrollable, setting the active tab, and focusing on the invalid field is enough to scroll to correct position. I created a fiddle example demonstrating a solution.
Sencha Fiddle: An Example of Scrolling to an Invalid Field in a Tab
tabPanel.items.each(function(tab) {
var formPanel = tab.down('form');
formPanel.getForm().getFields().each(function(field, index, length) {
if (!field.isValid()) {
tabPanel.setActiveTab(tab);
// Focusing an element will set the correct scroll position.
// However, an animation can help the user follow along.
formPanel.setScrollY(field.getPosition()[1], true);
field.focus();
return false;
}
return true;
});
});
http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-getPosition
http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-setScrollY
I'm using an Input Field in a Unity 3D game. When I enter text on my Windows 10 Mobile, and push the back button to dismiss the keyboard, Unity thinks I want to clear the Input Field. This behavior is not even mentioned in the documentation and I have not found a way to override it. I'd like to make it so the user can use the back button to dismiss the keyboard without reverting the Input Field. Any suggestions? Is this just a bug with Unity?
You can see the source code of InputField here: https://bitbucket.org/Unity-Technologies/ui/src/0155c39e05ca5d7dcc97d9974256ef83bc122586/UnityEngine.UI/UI/Core/InputField.cs?at=5.2&fileviewer=file-view-default
Apparently, clearing the field on escape is made by design. look at line 980 - 984:
case KeyCode.Escape:
{
m_WasCanceled = true;
return EditState.Finish;
}
What you can try is to create your own subclass of InputField and override the function
protected EditState KeyPressed(Event evt)
Of course it is not really clean, since you'll have to copy everything that the base InputField does in this function, except for lines 980 - 984.
The function KeyPressed cant be overridden.
I just added that in my function that listens on the value changes of the inputField:
if (Input.GetKeyDown (KeyCode.Escape)) {
return;
}
And it does exactly what is necessary :)
I am using NGUI's UIInput class to accept text input from user. when i start typing in text box in mobile devices. a key board appears and it has an another textbox within it self, with "OK"/"Done" button (Like a keyboard accessory view, if we're talking about iPhone).
Can i disable that text box appearing within keyboard ? Or its not even possible and i am shooting just blanks ?
From what i could gather by search for a while is, the appearance of keyboard is handled buy Unity's "TouchScreenKeyboard" class. but according to Unity Scripting reference there is nothing which could hide the textfield inside the keyboard.
Unity Scripting reference: TouchInputKeyboard
PS:- I should still be able to put input in textbox by directly typing into them, i just want an extra textbox within the key board to be removed.
TO be more clear i have attached images explaining this
This is the screen.
When i start typing in one of the textbox. a keyboard appears like the following.
as you can see the text box just above the keyboard is not the original one.
Did you try checking "Hide Input Check box" in Inspector view of that UIInput Textbox ?
private void OnGUI()
{
TouchScreenKeyboard.hideInput=true;
}
I don't know why it is, but I have had this problem as well and the "hide input" checkbox for some reason doesn't seem to do really anything other then change the keyboard text box from one line to multi line.
I did a little bit of digging and came across a quick lead that will enable that hide input check box.
This fix is Update() in UIInput.cs around 650
else if (inputType == InputType.Password)
{
TouchScreenKeyboard.hideInput = true;
kt = TouchScreenKeyboardType.Default;
val = mValue;
mSelectionStart = mSelectionEnd;
}
else
{
if(hideInput)
{
TouchScreenKeyboard.hideInput = true;
}
else
{
TouchScreenKeyboard.hideInput = false;
}
kt = (TouchScreenKeyboardType)((int)keyboardType);
val = mValue;
mSelectionStart = mSelectionEnd;
}
I added a check in the else statement
My code does a .pantolatlong then a .showinfobox
The info box does not appear, unless I remove the pantolatlong. I guess it is stopping it. I tried adding it to the endpan event but that did not work.
What is the simplest way to pan to a pushpin and display the infobox for it?
I was using setcenter, but I discovered that sometimes setcenter pans, and this breaks it.
After some insane googling, I came up with the solution, and I'll share it here so that others can hopefully not have the grief I went through.
I created and power my bing map using pure javascript, no sdk or iframe solutions. In my code, I generate the javascript to add all of the pins I want to the map, and inject it using an asp.net label.
If you call the setCenter() method on your Bing Map, it is supposed to instantly set the map, surprise surprise, to the coordinates you specify. And it does... most of the time. Occasionally though, it decides to pan between points. If you do a SetCenter, followed by a ShowInfoBox, it will work great, unless it decides to pan.
The solution? Being great programmers we are, we dive into the sdk, and it reveals there are events we can hook into to deal with these. There is an onendpan event, which is triggered after a pan is completed. There is also an onchangeview event, which triggers when the map jumps.
So we hook into these events, and try to display the infobox for our pushpin shape... but nothing happens. Why not?
You have to give it a few milliseconds to catch its breath, for unknown reasons, when the event is called. Using a setTimeout with 10 milliseconds seems to be fine. Your box will appear great after this.
The next problem is, you only want it to appear when it pans via whatever you used to make it flick between your pushpins (in my case, a table with onclick methods). I create/destroy the event handlers on the fly, although there are other options such as using a global variable to track if the user is panning, or if the system is panning in response to a click.
Finally, you have the one bug that comes from this. If you click a place in your list, and it jumps/pans to that location, the infobox will display fine. If the user dismisses it though, then clicks again on the list item, the map does not move, and therefore no events are triggered.
My solution to this is to detect if the map moved or not, by recording its long/lat, and using another setTimeout method, detecting if they changed 100ms later. If they did not, display the infobox.
There are other things you need to keep track of, as there is no way I can see to pass parameters to the eventhandlers so I use global javascript variables for this - you have to know which pushpin shape you are displaying, and also keep track of the previous mapcoordinates before checking to see if they changed.
It took me a while to piece all this together, but it seems to work. Here is my code, some sections are removed:
// An array of our pins to allow panning to them
var myPushPins = [];
// Used by the eventhandler
var eventPinIndex;
var oldMapCenter;
// Zoom in and center on a pin, then show its information box
function ShowPushPin(pinIndex) {
eventPinIndex = pinIndex;
oldMapCenter = map.GetCenter();
map.AttachEvent("onendpan", EndPanHandler);
map.AttachEvent("onchangeview", ChangeViewHandler);
setTimeout("DetectNoMapChange();", 200);
map.SetZoomLevel(9);
map.SetCenter(myPushPins[pinIndex].GetPoints()[0]);
}
function EndPanHandler(e) {
map.DetachEvent("onendpan", EndPanHandler);
setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10);
}
function ChangeViewHandler(e) {
map.DetachEvent("onchangeview", ChangeViewHandler);
setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10);
}
function DetectNoMapChange(centerofmap) {
if (map.GetCenter().Latitude == oldMapCenter.Latitude && map.GetCenter().Longitude == oldMapCenter.Longitude) {
map.ShowInfoBox(myPushPins[eventPinIndex]);
}
}
Here is another way:
function addPushpin(lat,lon,pinNumber) {
var pinLocation = new Microsoft.Maps.Location(lat, lon);
var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: pinNumber.toString() });
pinInfobox = new Microsoft.Maps.Infobox(pinLocation,
{ title: 'Details',
description: 'Latitude: ' + lat.toString() + ' Longitude: ' + lon.toString(),
offset: new Microsoft.Maps.Point(0, 15)
});
map.entities.push(pinInfobox);
map.entities.push(pin);
pin.setLocation(pinLocation);
map.setView({ center: pinLocation});
}