this.select() and JavaScript events on forms - javascript

I have a form box that I want to be always selected. I was able to get it to select everything in the box when it is clicked (using onFocus="this.select()") but I want it to be selected 100% of the time. The text in the box will be always changing, so I tried using onChange="this.select()" but that didn't work. Here's what I have:
<form>
<input type="text" id="txt1" size="30" maxlength="1"
onkeyup="showHint(this.value)" onFocus="this.select()" onBlur="this.select()"
onChange="this.select()" value="Click here, then press a key"/>
</form>
Basically I just tried to call everything in hopes that something would work, but it is still acting as if only onFocus="this.select()" is there. By the way, this is for controlling something via keyboard, which is why the maxlength is only 1. I want it to be always selected so that when new key are pressed, the last command will be changed without having to use backspace.

Is there a reason you aren't just using document keystroke detection? If you need the value to appear in the input field for some reason, once you detect the keystroke, you could fill the text box. This would be much simpler than trying to maintain focus on the field itself.

Related

How to make tabIndex(input field) to begin at the top on page load - Jquery

Alright, I really can't figure this out. When one of my pages is loaded, the search field is automatically focused. This is breaking the tab order of the page. There are skip links and other links that are in correct tab order before the search field, but for some reason the input field ALWAYS receives first focus. After you tab away, the tabbing order is correct, but then either skips the search field when re-tabbing through or starts tabbing at the input field. Below is a snippit of the the element:
<input id="search-input" quicksearch="false" type="text" autocomplete="off" name="q" aria-label="Search" value="" placeholder="Search..." tabindex="1">
I manually added the tabindex="1" in there to test it, but still doesn't do what I'm looking for. It semi-fixes it by actually starting the tabbing at the top, but then doesn't fit in the tab order which is the issue. I've added tabindex="0", "-1", "2" but every single time, that input field is the very first thing focused. I have removed the autofocus from the input field with jQuery and can verify that it has removed it, but to no avail. I've checked all the other element's tab indexes and they're either "0" or "-1".
Outside of the input field being the first to focus, the tab order is accurate. I just want the tabbing to start at the top of the page AND work it's logical way down AND include the input field like it's supposed to do!
Is it that jQuery isn't quick enough to remove the autofocus before it's included in the hard HTML?
You can do blur() to unfocus the input control.
function focusInput() {
document.getElementById('search-input').focus();
}
function blurInput() {
document.getElementById('search-input').blur();
}
<input type="text" id="search-input" value="Sample">
<br><br>
<button type="button" onclick="focusInput()">Click to gain focus</button>
<button type="button" onclick="blurInput()">Click to lose focus</button>

opening ngx-bootstrap typeahead on focus

Is there any way to open the ngx-typeahead when a user enters the input. In other words, on focus
I can get the dropdown to open if I type a single character into the input box, and then hit backspace.
just add this to the input
[typeaheadMinLength]="0"
Setting [typeaheadMinLength]="0" is the way to do this, but it also has the side effect of triggering a search even when nothing is typed in yet. I my case I needed to run the search on focus, but only if the textbox already had some content. I did this using a reference to the input's value:
<input #searchBox
[typeaheadMinLength]="searchBox.value?.length > 0 ? 0 : 1"
/>
You will need to do two things to make this possible:
First, set [typeaheadMinLength]="0" to have the input open when nothing has been typed yet.
Secondly, since the type ahead input is the first field in the form, you may need to add a small delay by also setting [typeaheadWaitMs]="300 (or some value). This is because the input may receive focus before the values are available.
Example:

in firefox entering data into a textbox which acts as a radio button needs a double click

In mozilla firefox entering data into a textbox which acts as a radio button needs a double click...how to make it possible through single click.Even after selecting the radio button and If i click the textbox once and try to enter only the radio button gets selected and the data is not entered.
For Firefox, the first click in to select the radio button, which gets the focus (honnestly don't know why it's different with other browsers).
I think your solution will be to use Javascript... See this jdfiddle, I've update your code ;)
The idea is to have two inputs not linked in the HTML, but linked via the onclick (or onfocus) function, like:
<input type="radio" name="address-chosen" value="1" id="address-switch_1" />
<input type="text" name="address-item_1" value="1" onclick="selectRadioButton('address-switch_1')"/>
My question is: what's your final objective? Because when you submit the form, you'll have to take into account that you have two separate inputs... or maybe update the value of the radio button with JS, too?

javascript autosubmit form when dropping value into text field

I'm having a simple form with just a text field. I'm dropping in values (drag and drop), which works fine (of course), but I want to autosubmit as soon as I've dropped the value into it.
From what I understand 'onchange' wouldn't work, because you need to actually exit the field for it to submit..
Same with 'onmouseup'.. doesn't work either unless I click in the field again...
How can I fix this?
form:
<form name="getrdun" action="getrdun" method="post">
Original string: <input type="text" name="origstuff" value=""><br>
<input type=submit value="Submit">
</form>
The input event should do the trick, although note from the reference that there are some problems with IE9 and Opera.
Updated with details:
Instead of using the change event, listen for the input event. You don't show any code, so I don't know how you're setting up event listeners, but, e.g. using plain old JavaScript.
inputEl.addEventListener('input', function() {
// submit the form here...
})
A jQuery version:
$('input[type="text"]').on('input', function() {
// submit the form here...
})
Obviously, you'll want to select the <input> element appropriately.

disable enable a textfield dynamically

Hi I was trying to make a textfield dynamic. This is my code
<input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false">
<input type="text" id="test2">
so fields get disabled perfectly but doesnt get enabled on blur. If any one here can solve my problem that would be great.
Perhaps in this situation it is better to make the field readonly and add some custom class to make it look like it is disabled.
Since disabled element are well... disabled :)
EDIT
I've done some testing and it gets enabled again on blur!
http://jsfiddle.net/dfhHz/
You still need to click outside the input to trigger the blur ofcourse
EDIT2
WHat would you like to achieve. Since this functionality looks a bit strange (disable on focus and enable on blur) to me :)
Why don't you use onmouseover and onmouseout events on your text field instead ?
<input type="text" id="test1" value="dynamic" onmouseover="this.disabled=true" onmouseout="this.disabled=false">

Categories