event for selecting item with Tab key - javascript

I have a simple form in which the values of the input tags change when I click on them using onclick="foo();". The problem is that when Im testingi it I naturally press tab to get to the next input box and this doesn't trigger the onClick function. I've tried onselect and a couple of others to no avail. Any help would be highly appreciated.
Example below:
<input name="user" type="text" value="username" style="color: grey;" onEnter="javascript:clear_input(this)"></input><br>
<input name="pass"type="text" value="password" style="color: grey;" onClick="javascript:clear_input(this); hide_input(this);"></input><br>

You need the onfocus event, this will handle both a click into and a tab into the element.
<input onfocus="clear_input(this)" />
Also, you don't need the javascript: label in there. The browser will just ignore it anyway:
<input name="pass"type="text" value="password" style="color: grey;" onfocus="clear_input(this); hide_input(this);"></input>
And finally, you should read up on Unobtrusive Javascript, what it is and how it will save headaches in the future :)

I guess you can use onfocus event. It works even for click or tab.
<input type="text" onfocus="myFunction()">
I guess it would be helpful.

Related

How do I set the focus on the first input in a form when blurring away from the submit button?

I have the following HTML form:
<form>
<input type="text" id="input1">
<input type="text">
<button>Submit</button>
</form>
I want to set the focus on #input1 when I blur on the Submit button. Here is the JS that I have:
document.querySelector('button').onblur = function() {
console.log('blurred');
document.querySelector('#input1').focus();
};
I can see the console.log happening, but for some reason the focus isn't being set on #input1.
Try it here: https://jsbin.com/gukocuyada/1/edit?html,js,console,output
Thanks in advance!
Since the <button> is the last focusable element on the page, when you out of it, the browser will override the .onblur handler and simply move the focus to the URL bar. This seems to be built in to most browsers (at least Chrome and Firefox).
You can confirm this by adding another <input> field after the <button> and you will see that hitting does indeed focus on the first <input> field.
You can kludge your way around that default browser behavior by adding a fake input field at the end:
<input style="width: 0px; height: 0px; border: none;" onclick="document.querySelector('#input1').focus();">

Is there a JavaScript method to duplicate Focus-on-next-element (Tab) behavior?

I would like to change the focus in the DOM based on the browser's own calculations of which element is the next focusable element.
I understand that...
Keypresses can't be triggered in most browsers by JavaScript (see https://stackoverflow.com/a/32429197/1766230), so we can't trigger the Tab key to go to the next focused element (nor would we want to since the keypress event could be overridden).
We could write some code to find all links/inputs/etc., find which one is currently focused, and trigger a focus on the next one. ... but that seems like it is just duplicating logic that is natively in the browser somewhere.
My question is: Can we utilize the browser's own logic for determining the next focusable element, and focusing on it?
No JS required for this.
Have you tried attribute tabindex ?
<input type"text" tabindex="1">
<input type"text" tabindex="3">
<input type"text" tabindex="2">
<input type"text" tabindex="5">
<input type"text" tabindex="4">
<input type"text" tabindex="7">
<input type"text" tabindex="8">
<input type"text" tabindex="6">
Referring to my source, you can use it for <a>, <textarea>, <select>, and <button> elements too.
Please let me know if this answer does not satisfy your question/needs.

jQuery Trigger Reset Only Resetting Some Forms

I have many forms on my page that are DYNAMICALLY added and I have a button that I want to trigger a reset to all the forms on the page except one.
An example of a dynamically added form is:
<form>
<label for="code">Question code:</label>
<input type="text" id="code" name="code" maxlength="25" class="used"/>
<div class="clear"></div>
<label for="title">Question:</label>
<input type="text" name="titl" name="title" maxlength="255" class="used"/>
<div class="clear"></div>
<label for="hint">Hint:</label>
<input type="text"id="hint" name="hint" class="used"/>
<div class="clear"></div>
<input type="hidden" name="type" value="tapper" class="used">
<input type="hidden" name="optionsType" value="none" class="used">
<input type="reset" value="Cancel" class="delete-button">
<input type="button" value="Add" class="action-button" onclick="pushQuestion(this);">
</form>
Also, after each form is dynamically added, I call:
$('form').on('submit', function (e) {e.preventDefault()});
Now, when I want to reset the forms, I call the following:
$('form').trigger('reset');
When entering this into the console, I get an array back with all the DOM forms. Some forms get reset, but others are unaffected. There are no errors being reported. Does anyone have any thoughts as to why some get reset while others do not?
EDIT Thanks for the help, but the issue has been resolved. See the problem in the comments below
After a few hours of tinkering, it was discovered that the issue was the result of the way the forms were cloned.
I was doing a deep clone of the existing forms which was yielding an odd state of the form which means that when .trigger('reset') was "triggered", it would reset the form to the default state of the clone which may or may not have included some original data yielding a reset that did not appear to be doing anything.
A workaround was to first fire a loop over all the inputs with .attr(value,'') to clear the attribute value after cloning. Then the .trigger('reset') functioned as expected.
I've noticed some inconsistencies with form handling among the various browsers. One gotcha is that the less standards-compliant browsers require an input or button with type=submit for some things to function correctly. I know this is that case at least with submitting a form by pressing the enter key in any text field.
Maybe try adding an <input type='submit'/>?

Javascript - onkeyup, onclick and onfocus events are not getting fired automatically through Javascript

I am automating a external web application(I can't change the code of external web app). I am able to set the value to the text box programmatically, but onkeyup, onclick and onfocus events are not getting fired automatically. This is code of text box.
<input type="text" style="WIDTH: 145px" onfocus="doComboFocus(this)"
onkeyup="doComboSearch(this);enableAccountSearchForm();"
onclick=javascript:resetAccountSearchForm(); size=30
name=selectedAccountsNarrowSearch />
I have also try this.
selectedAccountsNarrowSearch.fireEvent("onclick");
doesn't get any help.
Working with Internet Explorer - 8
Please help me to fix this issue.
Any help would be greatly appreciated. Thanks
Try putting the event attribute content in double quotes.
<input type="text" style="WIDTH: 145px" onfocus="doComboFocus(this)" onkeyup="doComboSearch(this);enableAccountSearchForm();" onclick="resetAccountSearchForm();" size="30" name="selectedAccountsNarrowSearch" />
The 'javascript:' in the onclick attribute might also be causing a problem.
You need to wrap your attribute in quotation marks (single or double).
<input type="text" style="WIDTH: 145px" onfocus="doComboFocus(this)"
onkeyup="doComboSearch(this);enableAccountSearchForm();"
onclick="javascript:resetAccountSearchForm();" size="30"
name="selectedAccountsNarrowSearch" />

Auto-highlight an input field on focus

I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.
<input type="text" name="textbox" value="Test" onclick="this.select()" />
You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/
Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.
You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}
Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.

Categories

Resources