Develop Reference

jQuery keypress enter not working

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>

Textarea not focus after click on button using javascript

Textarea is disable on page load. Textarea will be enable after click on button. I want to add focus on textarea after textarea is enable on button click using javascript.
Here is my code:-
<div id="fav-focus"><textarea name="remark" id="remark'.$value['id'].'" rol="4" cols="20" class="fav-view" disabled="disabled">'.$value['remark'].'</textarea> </div>
<a id="favt_edit" class="editfavorite editfavorite'.$value['id'].' buttonNew greenB normal" title="'.$value['id'].'">Edit</a>
<Script>document.getElementById('favt_edit').onclick = function() {
document.getElementById('fav-focus').focus();
};
</script>
Kindly advice me any solution.

<script>
document.getElementById('favt_edit').onclick = function() {
document.getElementsByName('remark')[0].disabled = false;
document.getElementsByName('remark')[0].focus();
};
</script>

You can use this code for enabling as well as focusing your textarea.
<script>document.getElementById('favt_edit').onclick = function() {
$('#fav-focus').find('textarea').removeAttr('disabled').trigger('focus');
};
</script>
Replace your jquery function with this.It will definately work.

Jquery popup windows automaticly pops up

I've gotten an piece of Jquery code which lets the user click a link which will open an popup with information. But I don't know how to modify it so that the popup automaticly opens up when the user loads the page.
Jquery:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function ($) {
$('[data-popup-target]').click(function () {
$('html').addClass('overlay');
var activePopup = $(this).attr('data-popup-target');
$(activePopup).addClass('visible');
});
$(document).keyup(function (e) {
if (e.keyCode == 27 && $('html').hasClass('overlay')) {
clearPopup();
}
});
$('.popup-exit').click(function () {
clearPopup();
});
$('.popup-overlay').click(function () {
clearPopup();
});
function clearPopup() {
$('.popup.visible').addClass('transitioning').removeClass('visible');
$('html').removeClass('overlay');
setTimeout(function () {
$('.popup').removeClass('transitioning');
}, 200);
}
});
});//]]>
</script>
Link to activate the code:
Link
Content of popup window:
<div id="example-popup" class="popup">
<div class="popup-body"> <span class="popup-exit"></span>
<div class="popup-content">
<h2 class="popup-title">Terms and Conditions</h2>
<p>
<h5><font color="grey">Please take time to read the following...</font></h5>
</div>
</div>
</div>
<div class="popup-overlay"></div>
I've tried modifying it mysql, but it didn't work out. As I'm not an expert in Jquery.
I know it is a big ask, but the code is here. And I know some geek can easily find what I need :)
So real quick. Instead of having the user to click the link to open the popup. I want the popup to automaticly open

Reasonably simple when you trigger a click on the element you want after you register the click handler.
/* your original code stays mostly the same except for chaining methods after it*/
$('[data-popup-target]').click(function () {
$('html').addClass('overlay');
var activePopup = $(this).attr('data-popup-target');
$(activePopup).addClass('visible');
/* now click the first one */
}).first().click();
ID's must be unique in a page, so you should change the duplicates on the popup link and popup container if they are the same as shown

Make google image search initiate on press of 'enter'

http://protected-river-1861.herokuapp.com/ Link to my site
So, I need to let the search of Google Images initiate on the press of the 'enter' key. Currently, it only works on the click of the button.
HTML:
<p>Enter the keyword to search for images</p>
<input id="search-term" type="text">
<button id="go-search">Go!</button>
<div id="search-results"></div>
<div style="width: 150px; margin:0 auto;">
application.js:
$(document).on('click', '#go-search', function() {
findImagesOnGoogle({keywords: $('#search-term').val(), container: '#search-results'})
});
$(document).on('click', '#search-results img', function() {
var url = $(this).data('url');
$("#workspace img").remove();
var img = $("").attr('src', url);
$("#workspace").append(img);
});
The CSS, JS and HTML are all on separate tabs in Sublime Text.

I think this Code can help you. I am not providing you entire solution but making way for you to learn to do code by yourself.
<input type="text" placeholder="Enter Search Term & Press Enter.." onkeydown="javascript:return checkEnterPressed(event);" />
<script type="text/javascript">
function checkEnterPressed(thisEvent) {
if (thisEvent.keyCode == 13) { // 13 : Enter Key
alert('enter Pressed');
// Do WHatever you want to do HERE.
return true;
}
}
</script>

Based on the code you provided you can try something like
$('#search-term').on("keypress", function(e) {
if (e.keyCode == 13) {
findImagesOnGoogle({keywords: $('#search-term').val(), container: '#search-results'})
}
});
});
and put put this after your last line of code.
An example (not with a search, but with a popup is here) jsFiddle

How to click a button through a shortcut with javascript without causing a page reload

I need some shortcuts in my web application, that will do the same as when a user clicks on a button, or presses the button with the accesskey.
I simplified my code to show you my problem:
<html>
<head><script src="jquery-1.4.2.js" type="text/javascript"></script></head>
<form>
<body>
<div id="myDiv">text</div>
<input name="cmdChangeText" type="submit" value="change text" onclick="document.getElementById('myDiv').innerText='text is changed'; return false;" />
<input name="cmdTestButton" type="submit" value="hello" onclick="alert('hello'); return false;" accesskey='z' />
</body>
</form>
<script type="text/javascript">
document.onkeydown = function() {
if (event.keyCode == 83) { //83 = 's'
window.$('[accesskey=z]').click();
}
}
</script>
</html>
The first button changes the text.
When you click the second button, or click it through accesskey (Alt + Z in IE), you get the alert, but the page does not reload: the text is still changed!
When I press some button, the S in this example, I do get the alert, but the page gets reloaded! Why is the return false; ignored this way, and what can I do about it?

I would get rid of the onclick="alert('hello'); return false" stuff and attach events using jQuery.
After that, you can try cancel the event bubbling:
$('#myInput2').click(
function() {
alert('hello')
return false
}
)
Just a hunch.

Give the buttons different names, in this example I have used 'test1' and 'test2' and add the following code.
$('input[name=test1]').click( function(e){
e.preventDefault();
$('#myDiv').innerText('text is changed');
});
$('input[name=test2]').click( function(e){
e.preventDefault();
alert('hello');
});
An input of type 'submit' will submit the page by default. Using 'preventDefault()' method on the event will, unsurprisingly prevent the default action. If you want the page to reload just remove this line.