Automatically Put Cursor in Form Input Field. April 14, 2011 5 Comments This post will teach you how to automatically put cursor in form field – click here to drop down to the tutorial below.
If you’re like me, you like to try to use your keyboard as much as possible.. or use your mouse as little as possible. So when you go to log into a website and the username field doesn’t automatically have the cursor in it when the page loads, you get a little frustrated. Oh, that only happens to me? No but seriously, shouldn’t all websites automatically put your cursor in the form field which you most likely want to fill out?! Go to – if you were logged in already, log out and then go to there. Did you notice how the username box is automatically highlighted, the cursor is already in there, and you’re ready to type?
If you’re like me, you LOVED it! This is something that is super simple to do, and should definitely be done if you: It’s really easy if you: If you understand HTML & javascript relatively wellHave access to the source code of your site. Moment.js. Underscore.js. Get Monitor Screen Resolution with Javascript. Find out and display a user's screen resolution with javascript.
In javascript, the screen.width and screen.height properties contain the size a visitor's monitor is set to. Bear in mind that the size the monitor is set to is not the same as the size of the browser window a visitor is using - windows can of course be set to different sizes. To find out this information you need to check the height and width of the viewport (different methods for different browsers, unfortunately). Your current screen resolution (if you have javascript enabled) is 1600x1200 To display a visitor's screen resolution, simple include the following code in your page: Screen resolution redirect Once you know what a visitor's screen resolution is, you can redirect them to a particular page. The script below will redirect users based on whether or not they have a monitor resolution of 800x600 or below: Related Tools If you want to actually test different screen resolutions, use the Screen Resolution Checker.
Create a new Fiddle - jsFiddle. Document.getElementById - Document Object Model (DOM) Summary Returns a reference to the element by its ID.
Syntax element = document.getElementById(id); where element is a reference to an Element object, or null if an element with the specified ID is not in the document. id is a case-sensitive string representing the unique ID of the element being sought. Example <! Notes New users should note that the capitalization of 'Id' in the name of this method must be correct for the code to function - 'getElementByID' does not work, however natural it may seem. If there is no element with the given id, this function returns null. Elements not in the document are not searched by getElementById. Var element = document.createElement("div"); element.id = 'testqq';var el = document.getElementById('testqq'); Non-HTML documents. Browser compatibility Specification getElementById was introduced in DOM Level 1 for HTML documents and moved to all documents in DOM Level 2.
DOM Level 2 Core Specification: getElementById See also Document Tags and Contributors.