I want to put text into a textarea input element using key events in jquery. I know that it can be simply done with .val() or .html() functions but there's a reason that I want to put text using keyevents. The following is my code:
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>In this example, the text field gets focus immediately after the document window has been loaded.</p>
<textarea id="myText"> </textarea>
<script>
$(function() {
document.getElementById("myText").focus();
$('#myText').focus().trigger({ type : 'keypress', which : 65 });
$('#myText').trigger(jQuery.Event('keypress', { keyCode: 65 }));
});
</script>
</body>
</html>
I have googled it and realized that there is two different ways of triggering events using jquery. I tried both but neither of which seem to be working.
It looks like your keypress event is getting fired, but since it is only an event I don't believe it is actually going to input your value into the field. If you're expecting something to happen on the keypress event from some other code you have, then there is some other issue.
If you demo with this fiddle you'll see the keypress event firing.
Try the code below to change the value of the input field with the new keypress value:
$(function() {
$('#myText').trigger(jQuery.Event('keypress', { keyCode: 65 })).val($("#myText")
.val() + String.fromCharCode(65));
});
The question is answered over there. Being short - key events won't change the actual input due to security reasons, but there is a plugin called "The $.fn.sendkeys Plugin" which can help you with a workaround.
Related
I'm trying to set the cursor into the input field. I'm using the functions focus() and select() but I don't know why it isn't working.
Any ideas?
<input type="text" id="test">
<p onmousedown="press()">Test</p>
<script>
function press() {
let input = document.getElementById('test');
input.focus();
input.select();
}
</script>
This was an interesting question that had me investigating a fair bit about the default behaviour of the mousedown event and the differences between that and click. Thanks!
The answer can actually be explicitly found in the Notes section of the MDN documentation for mousedown:
If you call HTMLElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the HTMLElement
So to fix, do exactly that. Note that I've slightly rewritten your code in order to do that, using addEventListener to bind a JS function to the event, which then takes the event object as a parameter. (You could I think have done it your way using the global event object - but it's a bad idea to use that. Using addEventListener rather than inline JS that evaluates a string attribute and executes it as JS is also a much better, more modern approach.)
<input type="text" id="test">
<p id="button">Test</p>
<script>
button.addEventListener("mousedown", press);
function press(event) {
event.preventDefault();
let input = document.getElementById('test');
input.focus();
input.select();
}
</script>
The reason I believe this is necessary is that the mousedown event must have a default handler that causes the focus to go on that particular element - and this overrides your attempt to programatically place the focus elsewhere. I'm not 100% sure on that, but it's the most likely explanation that I can come up with.
Note that your original code works completely fine if you'd used the click event rather than mousedown - and this is more usual. The difference is that click only fires when the user releases the mouse button after the initial press, whereas mousedown fires instantly when the press happens. I can't see why this distinction would ever be important, and unless for some reason it's vital to you, I would recommend using click instead, rather than the fix above.
i tried to create Jquery function to detect keydown in dynamic added table,
but it wont work :
this is my code
$(document).ready(function(){
$('#create').on('click',function(){
$('#test').append(<table class='dynamic'><tr><td><div class="focus">Name</div></td></tr><tr><td>address</td></tr>)
});
$(document).keydown(function(e){
if($(e.target).closest('table').hasClass('dynamic')&& $(e.target).hasClass('focus'))
{
alert('ok');
};
})
});
and this is my html :
<BODY>
<DIV ID="test"></DIV>
<button id="create">create it!</button>
</BODY>
please help me gusy
I found several errors in your sample. First, is that without input fields any keydown event will be fired on document element and you never will get your condition true. Second, is a code issue. You can't use jQuery functions without wrapping DOM elements into jQuery object. if(e.target.closest('table').hasClass('dynamic')
As example I made a sample fiddle for you. Also I guess you may be interested in such implementation but using mouseover event, which would be better for your case
Thanks for helping
I have a input that users put links or urls. What I do is when someone enters a url into the input jquery script connects to php script which gives some information about the url. Just like facebook share.
I use this code
$('.input-class').keyup(function(event){
$('.message').html('thanks for the url');
});
the problem with using keyup it work when you type something with the keyboard. Usually users copy and paste the url into the input. so, if they copy and past this is not working.
then I tried .change()
$('.input-class').change(function(event){
$('.message').html('thanks for the url');
});
but there is a problem with this as well. it works when the input loses the focus.
I need something should work what ever user type or paste into the input jquery should be triggered.
What should I do? Can I use change and keyup together?
change event is completely different, it gets triggered when the value changes which is evaluated when the element under question is out of focus.
Use input event as well which will get triggered when the text content of an element is changed through the user interface.
$('.input-class').on('keyup input', function(event){
$('.message').html('thanks for the url');
});
You can try on change Event, Make sure this will work in higher version of jQuery
jQuery('.input-class').on('change', function(e){
jQuery('.message').html('thanks for the url');
});
For Lower version of jQuery Use
jQuery('.input-class').live('change', function(e){
jQuery('.message').html('thanks for the url');
});
Trigger an input event:
$('.input-class').on('input', function(event){
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
document.getElementById("inputname").id = 'newinputname';
document.getElementById("newinputname").onchange = function() { Test() };
}
function Test() {
alert('Test');
}
</script>
</head>
<body onload='init()'>
Enter your name: <input type="text" id="inputname">
</body>
</html>
I can't to seem to find any way of viewing the altered page. For example in the above example, which has no purpose other than to illustrate, I would like to be able to see the effect of the onchange reflected. With say IE and F12 tools I can see the name change to the input element but can't see the onchange anywhere.
I have a piece of code which alters a table significantly, changes ids and sets onclick handlers. I would like to check that the changes have gone through. As above I can see the id alterations etc have worked OK and the onclick functions seem to work OK but I can't see where the onclick="..." has been entered in the new page output.
I think I may have some basic misunderstanding. Any help gratefully received.
Rather than adding attribute onchange, assigning document.getElementById("newinputname").onchange sets new event listener.
If you want to see events connected to element, you will have to use console.log and similar tools. See this answer: How to find event listeners on a DOM node when debugging or from the JavaScript code?
I'm trying to trigger an event handler when a script modifies an input element (text field.) On Internet Explorer, I can use the onpropertychange event, but on Firefox and other browsers there is no such event. So, according to the W3C docs, it seems the DOMAttrModified event does exactly what I want. But it doesn't fire in Firefox 11.
Here's a simple code snippet which reproduces the problem. I have an input text field, and a button which adds a character to the value attribute of the input text field. Clicking on the add char button should cause the DOMAttrModified event to fire:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function addChar() {
var q = document.getElementById("query");
q.value += "X";
}
function loadevents() {
var q = document.getElementById("query");
q.addEventListener("DOMAttrModified", function() {alert("DOMAttrModified event!");
}, false);
}
</script>
</head>
<body onLoad="loadevents()">
<input type="text" id="query">
<br>
<input type="submit" value="add char" onclick="addChar()">
</body>
</html>
But it doesn't. Any idea what I'm doing wrong? (I know that DOM Level 3 deprecates this event, but there doesn't seem to be a viable alternative right now. As far as I know, Firefox 11 still supports it.)
Changing the value in an input doesn't fire the DOMAttrModified event, that's all..
You need to change the attribute of the input node, not the property of the variable.
It's like the difference between the two jQuery functions: .prop and .attr
Read:
Which HTMLElement property change generates DOMAttrModified?
this forum discussion
(repeating my answer from Which HTMLElement property change generates DOMAttrModified? here, because it's relevant to this question):
Please also note that NO DOMAttrModified events will be fired when the 'disabled' attribute is set. So if your event is not firing, that could be the reason. This also goes for the IE-only 'onPropertyChange' event.