I want to allow a function to call by
- button click
- pressing of tab key
For example
$("#editable").keydown(function(e){
if(e.which == 9)
{
alert("hey");
});
Can I use a button to call the function too?
$("#save").click(function (e)
How to do it?
Yes it can be done, you can create a function and the call it on different event handlers:
<button id="myButton"> Click Me </button>
<input type="text" id="myText" />
JS
function myFunction(){
alert("hi!");
}
$(document).ready(function(){
$("#myButton").on("click",myFunction);
$("#myText").on("keydown",function(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
myFunction();
}
});
});
Check out the demo
Related
I have a textarea where it should not be possible to input line breaks by pressing enter. How can I disable enter in my textarea?
That is the code:
<textarea name="textarea" style="width:250px;height:150px;"></textarea>
Don't forget to use the keydown event instead of the click event
$("input").keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
If you use jquery in your web application you can do fallowing trick to disable enter key.
$('textarea').keydown(function(e) {
if(e.which == 13) { return false; }
});
else you can use this
document.getElementById('textarea_id').addEventListener('keydown', function(k){
if(k.keyCode == 13) return false;
});
I hope this will help you!
Use event.preventdefault and next do what you like. For example
<script>
$("textarea").click(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
</script>
I just have button in a page and nothing else
<button>hello</button>
When I open the page and press tab it comes to button but instead I want it in such a way that if I hit enter it should come to that button.
This is the code that I have written but it is not working
$(document).ready(function () {
$('.EntTab').on('keydown', function (e) {
if (e.keyCode == 13) e.keyCode = 9;
return false;
});
});
Need help in tackling this.
Check this!
$(function() {
$(document).keydown(function(e) {
if (e.keyCode == 13) {
$("button#hel").focus();
} else if (e.keyCode == 9) {
var e = jQuery.Event("keydown", {
keyCode: 9
});
$(document).trigger(e);
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hel">hello</button>
<button>hello</button>
<button>hello</button>
I want to trigger an event like displaying an alert message when I hit the Tab key inside a textbox.
<input type="text" />
$("input").blur(function (e) {
if (e.which == 9)
alert("Hurray!!!");
});
What I want to happen is that whenever I type inside a textbox then hit Tab it will do something.
Im using jquery1.7.2.min.js
I really don't know if Im doing it right.
For the demo http://jsfiddle.net/QfCpC/
$("input").keydown(function (e) {
if (e.which == 9)
alert("Hurray!!!");
});
Fiddle Demo
Will this help
$("input").live("keydown" , function (e) {
if (e.which == 9)
alert("Hurray!!!");
});
http://jsfiddle.net/QfCpC/3/
<input type="text" />
$("input").keydown(function (e) {
if (e.which == 9)
$('#someButton).trigger('click');//or you can directly call the handler also
});
$(document).ready(function() {
$("input").bind("keydown",function (e) {
if (e.which == 9)
alert("Hurray!!!");
});
});
demo here..
http://jsfiddle.net/QfCpC/
In order for the e.which parameter to be set properly, I believe it has to be called from a keydown event.
See the fiddle here. http://jsfiddle.net/QfCpC/2/
Try : http://jsfiddle.net/cEzLL/
$("input").keydown(function (e) {
if (e.keyCode === 9)
alert("Hurray!!!");
});
The reason is when u hit 'tab' two actions takes place
KeyUp for tab button
Blur action for Input type field
Now according to your code you are adding eventlistner to blur event ... and blur event doesn't have property of giving you key binding.
So in order to do this you need to bind "keydown".
$("input").keydown(function (e) {
if (e.which == 9)
alert("YEYYYYYYY!!!");
});
I have a form with 2 submit buttons, but I want only the second one to be triggered, if I click enter. Unfortunately, the first one is being clicked, what should I do? Is there maybe an attribute to set the main button?
Thanks.
Change the order of the two buttons in the HTML. Then reposition them the way you want using CSS.
To reverse the order of the buttons, you can do:
.buttons input { float: right; }
with the HTML:
<p class="buttons">
<input type="submit" name="second" value="second">
<input type="submit" name="first" value="first">
</p>
This is not possible via HTML. You have to use JavaScript instead.
Example (using jQuery):
<script type="text/javascript">
$(document).ready(function(){
$('#FormId input:text').keydown(function(event){
if ((event.which && event.which != 13) || (event.keyCode && event.keyCode != 13)) {
return true;
}
if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
$(this).parents('form').find('#SubmitButtonId').click();
return false;
} else {
return true;
}
});
});
</script>
I'm not sure about HTML tags... But you can write this JS:
<script type="text/javascript">
window.onload = function () {
document.getElementById('button2').focus();
}
</script>
Usually, I prefer to use JQuery and AJAX like so:
$(".TextBoxesClassORAnyOtherSelector").keydown(function () {
if (True) {
$.ajax({
type: "Post",
url: "/relativeAddress/Page.aspx",
data: { Field1: value1 },
success: function (data, status) { // on succeed codes },
error: function (req, status, error) { alert(error); }
});
}
});
I would put the primary button with the type=submit and the other would be managed by javascript (JQuery recommended).
This way when you press enter, since there is only one type=submit button, this one will be used.
Make one button of "submit" type. Hitting Enter should trigger submission regardless of button's relative position to the "reset" button:
<button type="reset">Cancel</button>
<button type="submit">Sign Up</button>
I've got a jQuery code, which
$("a.reply").click(function() {
//code
});
When I click the link with .reply class the first time, nothing happens. The second time I click, the code inside the click function works.
The link is being inserted on the page using PHP from a mysql database. so it's not being inserted dynamically.
Why is this happening? Any solution?
The BadASS Code:
$(function(){
//TextArea Max Width
var textmaxwidth = $('#wrapper').css('width');
//Initialize Focus ids To Different Initially
var oldcommentid = -1;
var newcommentid = -2;
//End Of initialization
$("a.reply").click(function() {
newcommentid = $(this).attr('id');
if (newcommentid == oldcommentid)
{
oldcommentid=newcommentid;
$("#comment_body").focus();
}
else
{
$('#comment_form').fadeOut(0, function(){$(this).remove()});
var commetformcode = $('<form id="comment_form" action="post_comment.php" method="post"><textarea name="comment_body" id="comment_body" class="added_comment_body" rows="2"></textarea> <input type="hidden" name="parent_id" id="parent_id" value="0"/> <div id="submit_button"> <input type="submit" value="Share"/><input type="button" id="cancelbutton" value="Cancel"/></div></form>');
commetformcode.hide().insertAfter($(this)).fadeIn(300);
//
var id = $(this).attr("id");
$("#parent_id").attr("value", id);
oldcommentid=newcommentid;
//dynamicformcreation function
dynarun();
//
}
return false;
});
dynarun();
function dynarun()
{
//Form Re-Run Functions
$('#comment_body').elastic();
texthover();
$("#comment_form input, select, button").uniform();
textareasizer();
$("#comment_body").focus();
$("abbr.timestamp").timeago();
return false;
}
//TextArea Resizer Function
function textareasizer(){$("#comment_body").css('max-width', textmaxwidth);return false;}
//Other Miscellaneous Functions
$('.comment-holder').hover(
function(event) {
$(this).addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
function texthover()
{
$('.added_comment_body').hover(
function(event) {
$(this).parent().parent().addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
return false;
}
});
This is a longshot, but are you running some sort of tracking script? Like webtrends or coremetrics (or even some of your own script, that's globally looking for all clicks)? I ran into a similar problem a while ago, where the initial-click was being captured by coremetrics. Just a thought.
Does it still happen if you comment out all your code and simply have an alert("hi") inside the click function?
Update
I think Sarfaz has the right idea, but I would use the document ready function like so
$(document).ready(function(){
$("a.reply").click(function() {
//code
});
});
I just ran into same problem and I resolved my problem by removing:
<script src="bootstrap.js"></script>
you can use bootstrap.min.js
Use Inline CSS for hiding div and use JS/jQuery to show . This way Jquery Click Event will Fire On First Click
<div class="about-block">
<div class="title">About us</div>
<div class="" id="content-text" style="display:none;">
<p>Show me.</p>
</div>
</div>
<script>
var x = document.getElementById("content-text");
jQuery( '.about-block' ).click(function() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
</script>