I have a basic web page that I'm trying to capture the enter key when pressed. I will have a page with many rows( depending on what was pulled by the database ) where each field is editable. What I'm trying to do is when a user is focused on a certain column on a certain row, I want them to be able to press enter and their focus will go to the next row but stay in the same column. I'm creating my grid with Dojo Grid.
The first part of the is to figure out how to capture the enter key.
The next part would be to figure out how to bind the javascript function to the paticular field.
Then finally I need to be able to advace my row by 1, stay in the same column and keep my field as editable.
So, any advice on the enter key capturing?
Is this enough? Accessibility Improvements to the 1.3 DataGrid:
Scrolling with the keyboard is now
supported.
Enter key press will now
invoke onrowclick event
When in edit
mode, pressing tab and shift/tab will
move focus to / from other editable
cells in edit mode on the same row
...
Related
I have a google sheet that uses an app script button to send the values from that sheet to another sheet. If someone forgets to press enter after filling in their information, it will not send the last cell value.
So if the cell previously had the value of 3, then we change it to 4, but don’t press enter, it will send the value of 3.
The solution, I think, is at the beginning of the function for it to submit somehow, or press enter, or select another cell, anything that works. But I can’t figure out how to do that so far.
I’ve tried various things but I can't find the right apps script function.
So far without pressing enter, or clicking on another cell, I am unable to access that cell value. Changing the active selection doesn't work.
const sh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("L1");
// change the active selection to another cell, but it just moves the 4 to the new cell
sh.setActiveSelection('A1');
In Google Sheets, it's not possible to force the cell edit submission (a.k. pressing enter) on behalf the active user. If training your spreadsheet users doesn't look a good solution, then you should consider another way for data entry, i.e. make a form in dialog/sidebar so you can use client side HTML/CSS/JavaScript to control your form.
Currently, I have an Text Field with AutoComplete item added to my page. I have a requirement to add a dropdown arrow button to the right of that item. The user should have the ability to use the features of AutoComplete but also have the ability to click the dropdown arrow to activate the list that appears from the AutoComplete item. For example, if the AutoComplete item is null and the user clicks the dropdown arrow, the list of all possible values should appear. However, if the user actually types something into the AutoComplete field, then the list of values will display specifically to what was keyed into the AutoComplete field.
Thus far I haven't come across any information online to help figure out how to achieve this task. Can anyone provide an solutions?
At the moment i have this functionality partially working... I have added the dropdown arrow as a button. When this button is clicked, it activates a dynamic action that executes JavaScript. The JavaScript I have is:
if ($(".ac_results").css("display") == "none"){
$(".ac_results").css("display","block");
}
else{
$(".ac_results").css("display","none");
}
This only works when the user has entered a value into the AutoComplete field (which initiates something in the background to create a with the class .ac_results). Then, the user removes the value keyed in and then clicks the dropdown arrows. The list appears for a split second then is gone. But if the button is clicked again the list of values appear and disappear as they should with the button clicks.
Any suggestions or solutions would be wonderful.
Thanks.
Use the Select2 Plugin instead. It has all the features you're looking for and will save you a lot of time getting all the CSS correct. Demo of it: https://apex.oracle.com/pls/apex/f?p=64237:20:0:
I'm using a form where in a text box is bound to a variable object by its path. I also have a button to fetch few records based on the input given in this text box. When I enter something for the first time and hit the button, it fetches the records. But again if I try to hit backspace or delete buttons inside the text box, it takes me to the previous page instead of simply deleting the text inside. Is there a way out? I tried with events like preventDefault() using keyCode restrictions, but in vain. Please help.
PS: This text box has regex validations and also has logic to pre-populate.
when records are fetched, you lose the focus on your text box. When you press the Backspace key once more, the browser takes you to the previous page (as most browers do). Set the focus back on your element after you fetch the records or change you code so the records fetching will not change the focused element.
See : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.focus
I have started to use JQGrid with version 4.6 since last few days. I have used jqgrid data form to insert and update data of the grid. In the form I have used several text-boxes. I get focus to next text-box by pressing tab key as usual. This works fine. But when last textbox is reached and press tab button, the focus should be transfer to the submit button as it is the next element in the form. But it doesn't. I have also observe this behavior on jqgrid demo site. It would be much better if focus is shifted to the submit button when tab key is pressed from the last element of the edit form of JQGrid.
Please help me out on this.
you can check the behaviour on http://trirand.com/blog/jqgrid/jqgrid.html and go to "New in version 3.5" -> Form Navigation.
Thanks & Regards,
Kartik Jajal
I have a form I'm working with that allows the user to continually add new rows as needed (used for making an article with multiple "howto" steps, they can click over and over again to add a new step). What I would like to be able to do is have the user be able to click in any of those rows at any time and then click on a word or button that is off to the side that will then insert the value of that button into the last known cursor position.
So for example I may have one form that currently has 3 rows. If the user goes back and wants to insert some data they could click back in the box and hit the button corresponding to the data they want to insert.
Example input 1: "Remove the customers current IP address and replace with their static IP, [USER COULD CLICK HERE AND THEN CLICK THE STATIC IP BUTTON AND %STATIC_IP% WOULD BE INSERTED AT THE LAST KNOWN CURSOR POSITION (AKA HERE)]
Example input 2: "Enter in the customers [Click to insert %WIFI_SSID%] into the router settings"
I have found several other stackoverflow articles that are able to all insert text but they all expect it to be into a defined textarea or input. In this case I'm needing it to insert into the last known cursor position. I hope this is all clear. I look forward to any assistance or questions.
Starter code: http://jsfiddle.net/4mJwU/
If you already know how to insert some arbitrary content at the last known caret position, your only problem is to know which field was focues last time before button was clicked.
That can be done in numerous number of ways, one of those would be utilize focus and blur events (attached to fields - rows in your case) to track (in some variable for example) reference to the field last focused. It should be a piece of cake from there.
Quick and simple script that can get you started http://jsfiddle.net/sjqWu/1/
Combine what you've learned from other stackoverflow anwsers with example above and you should be ok. Happy learning!
I'd question your design. To make the user have to click a field then click some text to insert into that field seems like too many steps. You could possibly utilize some sort of drag and drop routine. Or instead of the first click being a text box, maybe make it a drop down list?
I agree with WTK. You can store the record id or text box id using some sort of event, then proceed from there.