This really niggled me for ages before i realized that pressing the delete or backspace keyboard button whilst a feature/shape (in my case a 'Point') is selected in edit mode by the drawing manager then it would actually delete it. I can't allow this to happen otherwise each time i press the backspace button when editing a text label then it ends up deleting it!
As you'll see in the image above, i have designed a custom edit control form where once a feature/shape (in my case a 'Point') is selected then the user can edit the Title text input and the title will dynamically update. But as soon as they press the backspace button on their keyboard, the map thinks I want to delete it.
I need to be able to disable the keybaord shortcuts for delete, if i wanted to delete the feature then I'd select the delete button instead (button with the bin icon) grrr this is so annoying, cant find anything in MS docs that explains how to disable this keyboard shortcut?
https://learn.microsoft.com/en-us/azure/azure-maps/drawing-tools-interactions-keyboard-shortcuts#keyboard-shortcuts
Right so I've come up with a small hack, not ideal but it works nicely!
I add a few functions, one for the mouseover event and one for mouseout.
Add these events to the text input and fire then accordingly i.e. if the user is going to modify the text in the input field then the mouseover event is active and we can therefore put the drawing manage into 'idle' state. Putting the drawing manager into idle state stops the undesired keyboard shortcuts from functionning.
Then finally once the mouse cursor leaves the text input then we can restore the drawing manager back into edit mode.
HTML code for the text input ('Title: input as shown in the screenshot from my original question):
<div class=mb-2 mt-2">
<label for="textLabelTitleInput" class="form-label-xs">Title</label>
<input autocomplete="off" spellcheck="false" class="form-control form-control-xs" placeholder="Enter Name" id="textLabelTitleInput" oninput="updateTextLabelDesign()" onmouseover="textInputOnMouseOver()" onmouseout="textInputOnMouseOut()" />
</div>
JavaScript code:
function textInputOnMouseOver() {
updateDrawingMode('idle'); // See function 'updateDrawingMode'
}
function textInputOnMouseOut() {
updateDrawingMode('edit-geometry'); // See function 'updateDrawingMode'
}
// Function called from above functions in the drawing control toolbar.
function updateDrawingMode(mode) {
drawingManager.setOptions({
mode: mode
});
}
For those not familiar with the drawing manager options, see the MS Docs here for the fuller picture: https://learn.microsoft.com/en-us/azure/azure-maps/set-drawing-options
Related
I want to set focus on a button while caret is present in textbox and user can still enter data to textbox. But when user presses enter key, button press will be simulated.
I am currently using a work around to solve this problem by handling onKeyDown event and checking for enter key. But problem is there is no clue for user to understand this as there is not blue border around the button that indicates focus on button.
Here is a example of what I want to implement (user can enter text in textbox while focus is on :
I have tried to search on google and StackOverflow but could not find any relevant result.
This is a fundamental Windows principle. It's not possible to have 2 controls (windows) focused at the same time.
So the focus should be inside the text box. But you can get the visual indication needed by setting the ok button as AcceptButton of the form (you might also want to set cancel button as CancelButton).
In the form constructor, load event or using designer:
this.AcceptButton = okButton;
There is no need to handle KeyDown event - as soon as the text box is not multiline, pressing Enter while the focus is inside it will generate ok button click. The same applies for the button set as CancelButton when you press ESC.
I'm using Backbone in an app & running into an situation where events are not firing.
My View, maps to a dialog interface containing several controls (a text area, a couple radio buttons, etc.) and a save button. I'm defining the following events:
events: {
'input': 'onchange',
'change': 'onchange',
'click .save': 'save',
'click .cancel': 'cancel',
},
Each time any form element in the dialog changes, I fire onchange, which performs some validation and either enables or disables the save button.
In the 'normal' flow, everything works properly. I fill out the textarea, click an option on the radio button, and then click save. My work is saved properly.
In an alternative flow, I try to click save while my cursor is still in the text area, and nothing happens. Then, if I click on the save button a second time, the form saves correctly. I've tried setting a breakpoint at the very beginning of the save method, and confirmed that it is not called during the first button click, and is then called correctly with the second button click.
I've tried to make a minimal example as a jsFiddle to demonstrate the issue, but I can't isolate the buggy behavior.
What could be preventing the click event and save function the first time I click the button? Do you have any tips or recommendations for helping debug an issue like this?
Update: Using a Javascript Profiler
I went back and used a profiler to dig in on what's happening. Here was my process:
Set up page for test, with everything filled in except the primary textarea
Start profiler
Type a letter into the textarea and wait for onchange handlers to fire, which is evidenced by Save button becoming enabled
Wait several seconds
Click Save - nothing happens
Stop profiler
And here's my profile:
What's interesting is that there's a clear flurry of activity when the onchange handlers fire, seen as a visible spike in the flame chart. However, when I click save the first time, there is no javascript execution captured at all! Very curious...
In the iPhone ADF mobile app I have a textinput field and a "Save" commandbutton. In the properties for the commandbutton I have the disabled condition set (like if the textinput field is null). This works fine. In the beginning the save button is disabled and when I enter any text with a keyboard the button is automatically enabled and vice versa.
The only issue is my users can enter the text via voice too. If they use the voice to fill the text field - still the save button is not enabled. As soon as they change anything using key board it is enabled.
How do I set the command button properties to check this please?
In the InputText properties there is a property called Value Change Listener,
add a java method to it to check if the value is null or not then try one of the below:
Reset the InputText value as this will fire the propertyChangeListner and may activate your button.
Disable or Enable your button in code according to the value.
Hope this help.
I am following the 'Stock Trader RI' example by the Prism team,
but it does not address this exactly :
I have a Shell with a Main Region in it.
In this shell I have some filter fields and a grid.
When I press on a button - I would like to load a screen that allows me to change the filters,
and then press 'Save'. This would then call a service to update the fields, and close the pop-up.
Here is an illustration of the 'Shell' before pressing the button (left) and after (right) :
Problems are :
The 'Stock Trader RI' sample app only uses a modaless dialog popup. I need a MODAL pop-up (background will continue to refresh, but user will not have access to it as long as pop-up is active).
Need to have Silverlight-like effect when pop-up shows, meaning - 'Shell' needs to appear 'disabled' (like a gray mask over it).
Pop-up window should have no 'X' button and no 'minimize' or 'maximize' buttons. The pop-up window should be simply a rectangle with curved-corners.
I don't think I can use a 'Notification Window' or a 'Confirmation Window' because I cannot put inside them whatever I want. This is an example with 2 fields, but the pop-up might be much more complex with tabs, and a lot of information shown to the user.
So how do I show a modal pop-up from my "WPF+PRISM" Shell-View-Model once the 'Edit' button is pressed ? (Meaning, once the 'EditCommand' is executed...)
I have found a solution here.
Basically it uses InteractionRequest and it allows me to open a window (that I can style however I want, without the 'Maximize' 'Minimize buttons), and also - I can choose for it to be Modal.
Great thing about this solution is - that I can use custom pop-ups and not only Notification or Confirmation pop-ups.
Also - I can pass information back to the class the invoked the 'InteractionRequest'.
Only thing that it doesn't solve - is that I cannot make the calling view look disabled by adding a gray semi-transparent over it ... haven't figured out yet how to do that...
I am using EditorGridPanel with cellEditor which acts nearly like Excel. We implemented Arrow Keys to move among rows and columns.While validating a row, if it does not match the validation rule we show a MessageBox and hope that focus does not move if it is not valid. But, after the MessageBox shows - focus moves to the next row/column. Another problem is, user have to click in the OK button of the MessageBox to remove that from screen. Can we have the focus on the invalid column editor and also focus on the MessageBox OK button - so that user can press Enter to hide the message and continue entry?
Please check our link. http://www.softworksbd.com/swazilandlmis/yyyy_stockdata.php
Only one element can be focused, so focus should go to the message box. AFAIK enter/escape keys works out of box with message box.
You can pass callback to the messagebox. In this callback you can focus desired cell in the grid. Like this:
Ext.Msg.alert('Title', 'Message.', function(){
this.startEditing(rowIndex, colIndex);
}.createDelegate(grid));
So after message box is closed, the focus will go back to the editor.