I want a way to capture the keypress events on my controls and if it's an Enter, set focus to the next control.
We had to do this once in a simple ASP.NET application to allow users to navigate through the controls by pressing enter on a Web Environment. We used a simple JavaScript back then.
Is there a way to accomplish this? If it envolves creating custom controls, are the LightSwitch control's classes available so I can inherit them all or something like that?
If you need to do it for a large number of controls, you'd be better of creating a custom control (preferably a control extension - binding is automatic), but you're going to need to create several different controls I'd imagine, not just a TextBox.
Of course it's up to you, but you might find it easier to just explain to/teach your end-users that "Tab" goes to the next control, "Enter" does not. This is the way that most Windows applications work, so you'd be going with the flow, instead of against it. There's a reason it's called "tab order".
Sorry, I know it's probably not what you wanted to hear, and you're not the first to ask for a way to do this, but as I said, you'd be going against the way that most, if not all, modern Windows software works, and it's not simple thing to do.
Related
I have a WinForms app that uses a .NET webbrowser control. What I need to do, is wire up an event on the WinForms side to fire when a value is set (via javascript) in the loaded HTML page. I had success doing this with an onclick event of a button, but I can't seem to get it to work with a custom event. I don't know if this is a limitation in what the browser control can attach to event wise.
So essentially, I need that when a JS function is called in the HTML page and sets a value of a hidden input element (or it could be a regular input that I style to be hidden), I need to know that in WinForms. If it helps, I am using browser flags in this application to emulate IE11 instead of the default IE9 engine. The HTML page loaded is also mine so I can modify it any way needed to make this work properly. I would just use the onclick events of the buttons, but this is a gmaps integration where there can be upwards of 2000 buttons generated (one per marker placed) so it seems like a huge waste of resources to wire up 2000 onclick events when any of those button clicks only modify 4 input fields with the data I care about.
This project happens to be in VB.NET, but C# solutions would be fine as well. They can be transcoded or if the solution uses C# specific features, we can move this to a separate DLL and reference it.
After spending a lot of time on this today, I found a solution. It isn't a direct solution to the problem I posted, but it got me to where I needed to be. I am still interested in an answer to the original problem if anyone has one, but for now, what I found I could do was to create a class in .NET that I could assign to the ScriptingObject of the browser control and then call window.external.myFunctionName, where myFunctionName is a function within the .NET class. This works great for my specific problem, but would not work if I didn't also control the HTML page I was consuming with the browser. That is why I am still interested in alternate solutions if anyone has one. Thanks.
i want some code to move the cursor position in an IFrame via Javascript or jquery.
Really it will help me a lot.
Not possible. To answer why that's impossible, imagine:
I include an iframe to some very important business (let's suppose for a moment this business does not have frame-busting code)
When the user reaches my page, it begins manually controlling the cursor's position to highlight the "Delete Account" button, and simulates a click.
User's account is deleted on a completely different site, through none of their input.
Javascript allows you many UI-coding capabilities, but ultimately the user is in control. Even events like the "onpageunload" are very much restricted in what they can do, and browsers will often include 'escape' options even there. Furthermore, even in the instance that you CAN find a way around these chains, it will frustrate and quite possibly even panic many of your users. I try to warn people that any instance in which you're "re-coding the browser" may lead to all sorts of unpredictable issues, and may even prevent handicapped accessibility to your site.
It might help us to know if there's some specific reason you'd like to do this - possibly the solution is not what you think it is. For instance, if you are trying to make an FPS using WebGL, I seem to remember Chrome including some function to allow for mouse control inside of a window (possibly taking a browser confirmation dialog)
You should check out
http://jqueryui.com/draggable/
You "could" put make the content in the iframe draggable, if you host the src for your frame.
If you don't host the src for your Iframe, you "could" put have an inner iframe that is draggable, and an outer iframe that displays the inner frame.
It is a very messy solution, I hope there is something better for you.
I have a contenteditable div that I'd like to see the contents after a user types. This differs across different browsers for certain keys (like newlines and backspace).
For testing, I'd like to simulate this typing with javascript. Is there any way to do this?
I need more than just triggering events (which the majority of the questions on SO on javascript key triggering are about); I need the browser to see the 'enter' key was hit and do its thing to modify the contenteditable div. I'm interested in what the browser ultimately does so just listening for certain keystrokes and modifying the HTML myself would thus defeat the purpose.
This answer won't give you a way to do it via JavaScript, but I would recommend the browser automation testing tool, Selenium for this kind of testing. It will allow you to test the div as a user would interact with it.
I'm a little distraught at the current state of key capturing for web applications. It works great as long as you know your user is going to be typing in a specific place (e.g. an input field), but as soon as you want to do global shortcuts for an entire "application", it seems to fall apart.
I'm trying to find out if there is a better way to capture all the key events for a web page than the method I am currently using.
My current method is to use the JQuery Hotkeys plugin, bound to the document element, i.e.:
$(document).bind("keyup", "delete", function() {});
That works great for most purposes, but for example on Firefox, if the user happens to absentmindedly move their mouse over the navigation bar, the delete key will sometimes result in the user going "back", and the key is never received by the handler so that I can stop propagation.
Is there a different element I should be binding to? Is there a better plugin out there for this? Should I just avoid using any keys that are bound to things in common web browsers?
As more and more web applications look to mimic their desktop counterparts, it seems like this is a basic feature that web developers will increasingly require.
EDIT: I should point out that I am already using e.stopPropagation() and e.preventDefault(). The main problem seems to be that sometimes the event is never even passed to the bound function. I am basically wondering if anyone has figured out a "higher" element to bind to other than document. Or is there an alternative I have never even thought of? Embedding an invisible Flash element on the page and then passing all keys from that to JavaScript, for example (I don't think this would work).
I think, at this point, I am doing things the "standard, well-known way." I am trying to see if there is an outside-the-box way that isn't widely known that maybe someone on Stack Overflow knows about :-).
If you are making a sophisticated web-app with customized keyboard controls, the first thing you should do is alert the user that you are making a sophisticated web-app with customized keyboard controls. After that, tell them what the controls are and what they do.
Binding the keypress and keydown listeners to the document is the correct way to do it, but you have to remember to preventDefault and/or stopPropogation for keypresses that you want to override. Even if there is no default behavior, you will need to prevent them from cascading in case the user has rebound their default keyboard shortcuts.
Also, you will only be able to receive keyboard input when the page has focus.
When you say Delete I assume you mean the Backspace key as Delete generally referrs to the key next to Insert, Home, End, Page Up and Page Down.
Edit to add:
Be very careful about which keys you choose to override. If you're making an app to be used by people other than yourself, you have to worry about usability and accessibility. Overriding the Tab, Space and Enter keys is risky, especially for people using screen-readers. Make sure to test the site blind and fix any issues that may arise with traversing the page via the keyboard.
maybe you can use html-attribute ACCESSKEY and react onfocus.
i.e.:
<input type="text" size="40" value="somefield" accesskey="F">
i think u might need to add a tabindex to tags like <div>
<div id="foo" tabindex="1" accesskey="F">
You can't bind to events that happen where you have no control - e.g. the window chrome. The way most webapps deal with this is asking the user to confirm their decision to leave the page, using the onbeforeunload event:
window.onbeforeunload = function (e) {
var str = 'Are you sure you want to leave this page?';
e = e || window.event;
if (userHasSomeUnsavedWork) {
e.returnValue = str;
return str;
}
}
onbeforeunload - MDC
Absolutly non-tested but... try it on 'window' element.
Could you suggest the best way to keep focus on a particular input field on page?
What I am trying to say is, no matter where user clicks on the screen, the focus should return back to this one particular input.
I am thinking of a timer function that would check for focus every 500ms and if its not there, then bring it back.
Also the best way to submit this input field without making use of any button
Any other and best solution for this?
Even if I don't like the idea, thinking about usability and user experience. Anyway, to answer your question, your best shot probably is to set the focus initially to that input element and watch for the
blur event. Addionally you might want to check for outside click events.
That might look like this:
$('#test').bind('focusout', function(e) {
if($(this).val() !== 'releaseme') {
setTimeout(function() {
$(e.target).focus();
}, 25);
}
});
That would force the focus to that input (with the ID "test") 25ms after it lost the focus. To check for the additional outside-click check this link.
Example link: http://www.jsfiddle.net/FX79h/
Again, this sounds not usefriendly. You might want to think about whatever you are trying to do.
Would be a major impediment to disabled accessibility consideration. Remember, some people don't use mice to navigate, and you'd render the site useless to them.
As to allowing submit, you could trap the enter keystroke via Javascript...there's several tutorials on how to do it. However, this would also negatively affect the expected user interaction pattern and disrupt accessibility aids. The button text is the only thing telling a blind user's screen reader that they can submit to the site. Without it, your site is a black hole to them.
I'm all for experimentation and pushing the envelope, but there are reasons that you see so many common elements across the web. Think about it like this--would you stop for a triangular blue stopsign? How about a square pink one? Believe it or not, familiar patterns make for a more comfortable experience. How you "push" familiarity is what determines your success as a UI person. I might add that there's a LOT of bad UI out there....