I tried to use keypress to get an text from to update a text in . My html looks like this:
<p>words words words <i>test</i> more words</p>
<div id="newWord">
<form>
<input type="text" placeholder="New Hashtag"></input>
</form>
</div>
My jQuery looks like this:
$(document).ready(function () {
$("input").keypress(
function (e) {
var currentInput = $("input").val();
console.log(currentInput);
if (e.keyCode === 13) {
console.log('hello');
}
}
);
})
My console log doesn't log on first keypress, how can I help it? Also my "hello" never log. Any ideas why this is happening?
Thanks!
Use keyup event to capture first keyboard char.
$(document).ready(function () {
$("input").keyup(
function (e) {
var currentInput = $("input").val();
console.log(currentInput);
if (e.keyCode === 13) {
console.log('hello');
alert('hello');
}
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>words words words <i>test</i> more words</p>
<div id="newWord">
<form>
<input type="text" placeholder="New Hashtag">
</form>
</div>
Note: Hitting Enter key will submit the form and it will redirect the page. You might not see the console message for "hello"
The keypress function fires right as a key is pressed. You want to use keyup as that will fire when the key is released.
You need to use keyup as keypress will trigger value as soon as a key is pressed which is separate from releasing a key.
There are few changes that can be done. input is a self closing tag. Also it is better to use $(this) inside the function as it will get the value only from the input from where the event is triggered.
There may be a catch here. On pressing enter/return key you may see the form is getting submitted
$(document).ready(function() {
$("input").keyup(function(e) {
var currentInput = $(this).val();
console.log(currentInput);
if (e.keyCode == 13) {
console.log('hello');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>words words words <i>test</i> more words</p>
<div id="newWord">
<form>
<input type="text" placeholder="New Hashtag">
</form>
</div>
Related
I have two different text boxes (coming from loop). Right now data is submitting with "click" event. But now I want to "Post" data after "enter" button also (for example facebook comments). How can I do this?
Here is my code
foreach ...
{
<!-- First text box -->
<input type="text" placeholder="Post your comment here" id="txt'.$FeedId.'" class="feed_in_input" name="">
<img class="feed_reply_smiley2" data-coin='.$CoinId.' data-max2='.$postID.' data-min2='.$postID.' data-stat='.$PostStatus.' id="button'.$FeedId.'" src="'.base_url().'/assets/social/images/feed_reply_smiley.svg" alt="img">
<!-- Second text box -->
<input type="text" placeholder="Reply to '.$UserName.'" id="txt'.$FeedId.'" class="feed_in_input" name="">
<img class="feed_reply_smiley" id="button'.$FeedId.'" src="'.base_url().'/assets/social/images/feed_reply_smiley.svg" alt="img">
}
Here is my script
$('.feed_reply_smiley2').unbind().click(function(e) {
//our code here
});
$('.feed_reply_smiley').unbind().click(function(e) {
//our code here
});
I just want whenever user press "enter" button to any text box then function should execute same as working on "click" event. How can I do this?
Add everything inside a form tag, after which you can detect form submit
<script>
function myfunction(e) {
e.preventDefault();
alert("yes");
}
</script>
<form method="post" onsubmit="myfunction(event)">
<input name="something" />
<input type="submit" />
</form>
The preventDefault will prevent the default behaviour of submitting data
Here's an example of how to handle enter in a text input. In your case:
$('.feed_in_input').on('keyup', function(event) {
if (event.keyCode == 13) {
// 13 = Enter Key
alert('enter key pressed.');
}
});
Next, if your goal is to fire the same code from several different events,
the first step is to set up that code as a callable function. For example:
function handleClickAndEnter() {
// our code here
alert('Action happened!');
}
Now you can call that function from each of your handlers, for example:
$('.feed_reply_smiley').on('click', handleClickAndEnter);
$('.feed_reply_smiley2').on('click', handleClickAndEnter);
$('.feed_in_input').on('keyup', function(event) {
if (event.keyCode == 13) {
// 13 = Enter Key
handleClickAndEnter();
}
});
You could also combine the first 2 handlers into one if you want:
$('.feed_reply_smiley, .feed_reply_smiley2').on('click', handleClickAndEnter);
If your code needs to determine which event was triggered, you need to go a bit further. Click "Run Code Snippet" to see this all working.
$('.feed_in_input').on('keyup', function(event) {
if (event.keyCode == 13) {
// Pass the event along to the handler
handleClickAndEnter(event);
}
});
$('.feed_reply_smiley, .feed_reply_smiley2').on('click', function(event) {
// Pass the event along to the handler
handleClickAndEnter(event)
});
// Now accept the event as a parameter
function handleClickAndEnter(event) {
// our code here
if (event.target.nodeName == "INPUT") {
alert('Someone hit enter!');
} else if (event.target.nodeName == "IMG") {
alert('Someone clicked an image!');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Input 1: <input class="feed_in_input" type="text">
<br><img src="https://via.placeholder.com/350x65" class="feed_reply_smiley">
<br><br>Input 2:<input class="feed_in_input" type="text">
<br><img src="https://via.placeholder.com/350x65" class="feed_reply_smiley2">
I've written a simple input of type text, but when I press enter while my cursor is inside the textbox, it looses the focus. How can I ignore enter key to stop losing focus from the text box? I tried doing something like this:
<input type="text" (keyup)="keepFocus($event)" />
and keepFocus() is a method:
keepFocus(e) {
e.target.select();
}
But this method is called everytime I press a key, which is not very efficient. Is there a better solution to handle this behavior?
You capture just the enter key, and prevent default when it's pressed
document.getElementById('myInput').addEventListener('keypress', function(event) {
if (event.which === 13) event.preventDefault();
});
<input type="text" id="myInput" />
Another way to do this is by getting the keyCode (that e parameter use).
I mean, use this:
http://www.javascripter.net/faq/keycodes.htm
And this:
https://www.w3schools.com/jsreF/event_preventdefault.asp
Something like this would be fine:
function keepFocus(e) {
if(e.keyCode == 13)
e.preventDefault();
}
<input type="text" keyup="keepFocus" />
This will prevent that you lost the focus when enter key is pressed!
There are two ways to do the job.
First, reput the focus to the input when the user click "Enter":
<input type="text" onkeyup="keepFocus(event);" id="teste" />
function keepFocus(e) {
if (e.key=="Enter") {
var teste = document.getElementById ("teste");
teste.focus ();
}
}
Second, prevent the default behavior of the text field:
function keepFocus(e) {
if (e.key=="Enter") {
e.preventDefault ();
}
}
I think the second way is better because you do not have to add an id to your input.
I would like to ask why it will have multiple response? How can i enter the input field with just one response?
Expectation : Input the data in input field and press the enter , it will execute the actions.
$("#textInput").keypress(function (e) {
console.log("123");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type='text' id='textInput'/>
You have syntax error in you code. closing should be }); instead of )};
$("#textInput").keypress(function (e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textInput">
Expectation : Input the data in input field and press the enter , it will execute the actions.
In order to submit the corresponding form as soon as the user enters a text string and a final enter key you can:
test if current char is the enter key (e.which == 13)
get the closest form
submit the form
$("#textInput").on('keypress', function (e) {
if (e.which == 13) {
$(this).closest('form').submit();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php">
Enter text and type enter to submit:<br>
<input type="text" name="textInput" value="">
</form>
I think, you should have choose other event,like onblur to fix your problem
$("#textInput").on('blur',function (e) {
console.log("123");
)};
In your code ,keypress events gives you output,in every keypress action,So this is the reason you got multiple responses
And next,if you think,if you want to press Enter button then need response,In this case little changes will helps you
$("#textInput").keypress(function (e) {
if(e.which == 13) {
console.log("123");
}
});
The keypress event is sent to an element when the browser registers keyboard input.
— jQuery Documentation link
What you really want is .submit() as they are the one that will only be triggered when the user submits info.
$("#textInput").submit(function (e) {
console.log("123");
)};
Or if you only want to detect enter keypress but not submit, use this:
How to detect pressing Enter on keyboard using jQuery?
Hi guys I'm learning Javascript and I would like to ask you guys how can I go to the next textbox after inputing text when I press the enter button in the keyboard. thank you
You can use .keyup() to keep track of when user finish key in a character and e.keyCode to get which key was pressed, if it's 13(means enter) then use .focus() to focus the next textbox element:
$('input[type="textbox"]').keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
Fiddle Demo
Try this code :
$('#inputform').on('keydown', 'input', function (event) {
if (event.which == 13) {
event.preventDefault();
var $this = $(event.target);
var index = parseFloat($this.attr('data-index'));
$('[data-index="' + (index + 1).toString() + '"]').focus();
}
});
Help Link
I've developed a plugin to include enter event.
(function ($) {
$.fn.enter = function (func) {
this.bind('keypress', function (e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);
You can call it like this:
$('#input1').enter(function(){ $(this).next().focus(); });
You can go to the next field in many ways, as demonstrated by all the answers here, but don't forget to assign the order of what is actually NEXT as well. You can go from field to field with the TAB button, and the layout of your site may not always go in the order you'd expect or want. The solution to this is to add tabindex="" to your fields as such:
<input type="text" tabindex="1" />
<input type="password" tabindex="2" />
<input type="submit" value="Log In" tabindex="3" />
I have a simple problem (hopefully), but I am unable to find a clear solution.
I have a datatable, which has a text input field. The user enters text into the text field, and hits the enter key. This automatically filters from the text entered.
I was hoping to use the onkeyup event to trigger so when a user enters a value in the text field, the datatable automatically updates, rather than the user having to press enter.
<input type="text" name="input" class="filter" id="input" onkeyup="functionName(this)" value="">
<script>
function functionName(e) {
alert(e.value);
}
</script>
This code works, so when I enter a value, it pops an alert up displaying the entered value.
Is it possible i can change the alert, to do a submit, or replicate what the "enter" key does.
From trying to find a solution, it is more difficult because it is not a form, as it uses ajax so the .submit methods will not work.
I was also hoping a solution like this could work
<script>
var e = jQuery.Event("keyup");
e.which = 13; // Enter
$("#input").trigger(e);
</script>
I know there are many similar topics, and I have looked, but none of them seem to be the right solution for me.
Thanks for the help.
//
Edit
//
Based on the keyup issue, how can I refocus cursor after filtering. Is this done at the same time as filtering?
$obj.find('input.filter').on('keyup',function(e){
e.preventDefault();
ajax($obj);
});
You're using jQuery, so there's no real need to use onclick="", Secondly try to avoid to use reserved names for IDs & Classes (e.g. #input). Lastly, you can mimic the form submission by using $.post() on each .keyup event like below:
<input type="text" name="input" class="filter" id="searchinput" value="" />
<script>
$(document).ready(function() {
$(document).on('keyup', '.filter', function( event ) {
$.post( 'yourapi.php', { input: $(this).val() }, function( data ) {
//Refocus the <input />
$('#searchinput').focus();
});
});
});
</script>
As you can code in jquery too. Then you can go with this code......
$(document).ready(function(){
$(".filter").keyup(function(){
var text_input_text = $(this).val();
//here is your ajax post request
$.post('url for post', {filter_text: text_input_text}, function(response){
console.log(response);
});
});
});
Here we have covered the keyup event and ajax post.
Hope this will help you.
$(document).ready(function(){
$("input").keyup(function(event)
{
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode != '13')
{
var e = jQuery.Event("keyup");
e.which = 13; // Enter
$("input").trigger(e);
}
else {alert("Enter triggered");
}
});
});
DEMO JSFiddle