We Keep Coding

Automated clicked input type in Jquery

I'm having trouble and confused, is there any trigger event in Jquery to click automatically the input type using the id of the input type? The thing is I have a problem in terms of loading all data from my input type, it's just like typeahead or autocomplete, and I don't want to click the input type manually. it will very helpful for me.
Before click
After clicked
<input class="form-control" id="kt_typeahead_1" type="text" placeholder="States of USA" v-model="formFields.fullname"/>
Script
mounted() {
this.autoComplete();
},
autoComplete() {
$("#kt_typeahead_1").trigger('click');
}

$('input#kt_typeahead_1').autocomplete("search"); will initiate the autocomplete search.
If you wanted to put a value in there first so it has something to search for, $('input#kt_typeahead_1').val("My value") - and then the autocomplete.search method above
If you just want to give the input a focus, $("#kt_typeahead_1").focus()

Setting Default value of input textbox in Jquery EasyUI dialog

I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog

To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;

Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox

use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working

I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.

try this
document.getElementById("d_amount").value=m;
you don't need innerHTML

I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});

I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.

Select all text only on first click

I'm using Dojo 1.6 and want to select all the text of a textbox only at the first click. I know I can use dojo.byId("id").select(); to select the whole text, but the problem is that you can't make a subselection of text anymore. I've provided a small code example to show the problem.
require(["dojo/parser", "dijit/form/TextBox"]);
require(["dojo/query", "dojo/on", "dojo/domReady!"], function(query, on) {
query("#firstname").on("click", function(evt) {
// this will not work because I want to select 1 or more characters
if (!dojo.byId("firstname").select())
dojo.byId("firstname").select();
});
});
And the fiddle: http://jsfiddle.net/3CLz9/
So the main problem is that I can't determine if one or more characters are selected.

You could use the dojo/on module's once() function. But I don't think that this is what you want. I suppose you want to select the text each time the input field gains focus. If you want this, you should be using the onFocus event, (so replace the "click" by "focus").
The only problem now is that after you select the text, the default event will move your cursor to the selected position and unselect your text (you will see it blink). To solve that you should also bind an mouseup event handler that cancels when you just gained focus. For example:
query("#firstname").on("focus", function(evt) {
this.select();
on.once(this, "mouseup", function(evt) {
evt.preventDefault();
});
});
I also updated your fiddle.
I just noticed that you're actually using a dijit/form/TextBox widget (didn't work on your JSFiddle so that's why I didn't notice it), but you can easily do this with the selectOnClick property. Add it to your data-dojo-props and it will work.
For example:
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, selectOnClick: true" id="firstname" />
Here is your fiddle (with a working textbox widget). If you want to do the same thing for Dojo versions below 1.7, you can do that like described in this fiddle.

Codemirror Functions and extending the script

So I have the js-hint on my file, as well as the foldFunction
I don't want it to be an extra key set, I'd rather have it in my options panel to turn them on or off. Which brings to me to the js-hint part I want it to run all the time, instead of only when it turns on for one word.
Has anyone who has experience with this had luck on doing this? I already get how I'm going to get the foldFunction I believe:
extraKeys: { "Ctrl-Q": function (cm) { CollapseFunc(cm, cm.getCursor().line); },"Ctrl-Space": "autocomplete" }
Turning that to this:
var a= document.getElementById('checkmark');
if(a.checked === true){
CodeMirror.defineOptions...
}
I'm not sure how to further this as I'm not positive that defining the Option foldGutter to false will work as its altered after the page has load.
Does anyone have any suggestions?

After code mirror is instantiated you can enable or disable foldGutter using the codemirror setOption method. The following codemirror event handler will fire whenever new input is read from the hidden text field. If the checkbox is checked and the autocomplete menu is not already open, the execCommand method will be fired opening the autocomplete menu. This will result in hints as you type. I've added this to my implementation of codemirror and will test it out.
<label><input type="checkbox" id="AutoCompleteEnabled" /> Enable Autocomplete </label>
<label><input type="checkbox" id="FoldGutterEnabled" /> Enable Code Folding </label>
<script>
$(function(){
$("#FoldGutterEnabled").on("click", function(){
CM.setOption("foldGutter", this.checked);
});
CM.on("inputRead", function(cm){
// Show the autocomplete menu when input is changed if the Enable Auto Hint checkbox is checked and the autocomplete menu is not already open.
if($("#AutocompleteEnabled:checked").length==1 && $(".CodeMirror-hints").length==0) CM.execCommand("autocomplete");
});
});
</script>
Let me know if you were looking for something different.

html <input type="text" /> onchange event not working

I am trying to do some experiment. What I want to happen is that everytime the user types in something in the textbox, it will be displayed in a dialog box. I used the onchange event property to make it happen but it doesn't work. I still need to press the submit button to make it work. I read about AJAX and I am thinking to learn about this. Do I still need AJAX to make it work or is simple JavaScript enough? Please help.
index.php
<script type="text/javascript" src="javascript.js"> </script>
<form action="index.php" method="get">
Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
<input type="submit" value="Compute" />
</form>
javascript.js
function checkInput(textbox) {
var textInput = document.getElementById(textbox).value;
alert(textInput);
}

onchange is only triggered when the control is blurred. Try onkeypress instead.

Use .on('input'... to monitor every change to an input (paste, keyup, etc) from jQuery 1.7 and above.
For static and dynamic inputs:
$(document).on('input', '.my-class', function(){
alert('Input changed');
});
For static inputs only:
$('.my-class').on('input', function(){
alert('Input changed');
});
JSFiddle with static/dynamic example: https://jsfiddle.net/op0zqrgy/7/

HTML5 defines an oninput event to catch all direct changes. it works for me.

Checking for keystrokes is only a partial solution, because it's possible to change the contents of an input field using mouse clicks. If you right-click into a text field you'll have cut and paste options that you can use to change the value without making a keystroke. Likewise, if autocomplete is enabled then you can left-click into a field and get a dropdown of previously entered text, and you can select from among your choices using a mouse click. Keystroke trapping will not detect either of these types of changes.
Sadly, there is no "onchange" event that reports changes immediately, at least as far as I know. But there is a solution that works for all cases: set up a timing event using setInterval().
Let's say that your input field has an id and name of "city":
<input type="text" name="city" id="city" />
Have a global variable named "city":
var city = "";
Add this to your page initialization:
setInterval(lookForCityChange, 100);
Then define a lookForCityChange() function:
function lookForCityChange()
{
var newCity = document.getElementById("city").value;
if (newCity != city) {
city = newCity;
doSomething(city); // do whatever you need to do
}
}
In this example, the value of "city" is checked every 100 milliseconds, which you can adjust according to your needs. If you like, use an anonymous function instead of defining lookForCityChange(). Be aware that your code or even the browser might provide an initial value for the input field so you might be notified of a "change" before the user does anything; adjust your code as necessary.
If the idea of a timing event going off every tenth of a second seems ungainly, you can initiate the timer when the input field receives the focus and terminate it (with clearInterval()) upon a blur. I don't think it's possible to change the value of an input field without its receiving the focus, so turning the timer on and off in this fashion should be safe.

onchange only occurs when the change to the input element is committed by the user, most of the time this is when the element loses focus.
if you want your function to fire everytime the element value changes you should use the oninput event - this is better than the key up/down events as the value can be changed with the user's mouse ie pasted in, or auto-fill etc
Read more about the change event here
Read more about the input event here

use following events instead of "onchange"
- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

Firstly, what 'doesn't work'? Do you not see the alert?
Also, Your code could be simplified to this
<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />
function checkInput(obj) {
alert(obj.value);
}

I encountered issues where Safari wasn't firing "onchange" events on a text input field. I used a jQuery 1.7.2 "change" event and it didn't work either. I ended up using ZURB's textchange event. It works with mouseevents and can fire without leaving the field:
http://www.zurb.com/playground/jquery-text-change-custom-event
$('.inputClassToBind').bind('textchange', function (event, previousText) {
alert($(this).attr('id'));
});

A couple of comments that IMO are important:
input elements not not emitting 'change' event until USER action ENTER or blur await IS the correct behavior.
The event you want to use is "input" ("oninput"). Here is well demonstrated the different between the two: https://javascript.info/events-change-input
The two events signal two different user gestures/moments ("input" event means user is writing or navigating a select list options, but still didn't confirm the change. "change" means user did changed the value (with an enter or blur our)
Listening for key events like many here recommended is a bad practice in this case. (like people modifying the default behavior of ENTER on inputs)...
jQuery has nothing to do with this. This is all in HTML standard.
If you have problems understanding WHY this is the correct behavior, perhaps is helpful, as experiment, use your text editor or browser without a mouse/pad, just a keyboard.
My two cents.

onkeyup worked for me. onkeypress doesn't trigger when pressing back space.

It is better to use onchange(event) with <select>.
With <input> you can use below event:
- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

when we use onchange while you are typing in input field – there’s no event. But when you move the focus somewhere else, for instance, click on a button – there will be a change event
you can use oninput
The oninput event triggers every time after a value is modified by the user.Unlike keyboard events, it triggers on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
<input type="text" id="input"> oninput: <span id="result"></span>
<script>
input.oninput = function() {
console.log(input.value);
};
</script>
If we want to handle every modification of an <input> then this event is the best choice.

I have been facing the same issue until I figured out how to do it. You can utilize a React hook, useEffect, to write a JS function that will trigger after React rendering.
useEffect(()=>{
document.title='fix onChange with onkeyup';
const box = document.getElementById('changeBox');
box.onkeyup = function () {
console.log(box.value);
}
},[]);
Note onchange is not fired when the value of an input is changed. It is only changed when the input’s value is changed and then the input is blurred. What you’ll need to do is capture the keypress event when fired in the given input and that's why we have used onkeyup menthod.
In the functional component where you have the <Input/> for the <form/>write this
<form onSubmit={handleLogin} method='POST'>
<input
aria-label= 'Enter Email Address'
type='text'
placeholder='Email Address'
className='text-sm text-gray-base w-full mr-3 py-5 px-4 h-2 border border-gray-primary rounded mb-2'
id='changeBox'
/>
</form>
Resulting Image :
Console Image

try onpropertychange.
it only works for IE.