I have javascript that will fire an alert box when the enter key is pressed within a telerik RadAutoCompleteBox. When enter is pressed i need to find the nearest asp.net (input button) and click this. Any Suggestions?
<script>
$(document).ready(function () {
var handler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown;
Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown = function (e) {
handler.apply(this, [e]); // Let AutoCompleteBox finish it's internal logic
if (e.keyCode == Sys.UI.Key.enter) {
this._onBlur();
alert('Enter has been pressed inside RadAutoCompleteBox');
}
}
});
</script>
I'm not sure this is what you are looking for since it requires jQuery, at any rate here are 2 options. One going through a parent element and then looking through the child elements, the second if they are on the same level through siblings.
$('#textbox').on('keyup', function() {
$(this).parent().find('input[type="button"]').click();
});
$('#thebutton').on('click', function() {
alert('the click happened');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<input type="text" id="textbox">
<input type="button" id="thebutton" value="click me">
</div>
$('#textbox').on('keyup', function() {
$(this).siblings('input[type="button"]').click();
});
$('#thebutton').on('click', function() {
alert('the click happened');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox">
<input type="button" id="thebutton" value="click me">
You can use closest() to find the nearest "button type" input or button tag
if (e.keyCode == Sys.UI.Key.enter) {
// Code
var input = $(e.target).closest('input[type="button"],input[type="submit"],button');
if (input.lenght > 0) {
input.click();
}
}
This will search the element itself and later will traverse up through its ancestors in the DOM tree to find the first match and click it
Related
How can I simulate a keypress to an input, using vanilla javascript?
I have tested every possible answer on SO and elsewhere, and it doesn't work on Chrome or Firefox.
For example, let's say we have a form:
<input id="myInput" type="text">
<button id="myButton>Click Me</button>
How could I make it so that when the button is clicked, the letter "a" is added to the input?
You'd first add a keyup event listener to the document object and inside the callback you assign the value of the input via value depending on which key was pressed:
var input = document.getElementById("myInput");
document.addEventListener('keyup', function(e) {
if (e.which === 39 || e.which === 19) {
input.value += 'a';
}
});
<input id="myInput" type="text" />
<button id="myButton">Click Me</button>
This way works i think:
<html>
<body>
<input type="text" id="myText" placeholder=" ">
<button id="but1" onclick="myFunctionA()">A</button>
<button id="but2" onclick="myFunctionB()">B</button>
<script>
function myFunctionA() {
document.getElementById("myText").placeholder = document.getElementById("myText").placeholder + "A";
}
function myFunctionB() {
document.getElementById("myText").placeholder = document.getElementById("myText").placeholder + "B";
}
//And so on
</script>
</body>
</html>
Any doubts tell me
I'm trying to show save button only if input gets value,
The issue is if i use append for each input i get 1 button printed, what I'm looking for is regardless of input length get the button only once.
The important is input not be empty that's all.
Code
<input class="text_dec form-control" type="text" onkeypress="myFunction()" name="text_dec[]" id="'+ textFieldsCount.toString() +'">
function myFunction() {
$('#moreless').append("button here");
}
any idea?
Instead of keypress, use keyup, this will call the listener just when the key is released, so you will have the correct length of the input value. With that, you can check if the button must be displayed or not.
Also, I would have another check to make sure that input have some value on it to save when clicked.
Like below, take a look:
$(function(){
$('.myInput').on('keyup', function(){
var btnElem = $('.myButton');
var charLength = this.value.length;
if (charLength > 0){
btnElem.show();
}else {
btnElem.hide();
}
});
$(".myButton").on("click", function(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
});
});
.myButton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="">
<input class="myButton" type="button" value="Save Button" />
</body>
EDIT
Now, if you really need to make as you were doing before (I don't consider it a best practice and also recommend you to rethink if you really wanna go through this) here goes a code that will help you. Click to show.
Here I added the functions and created the button element (if necessary) then append it to DOM just when the input have some value length.
function myFunction(input){
var btnElem = $(".mySaveButton")[0];
if (!btnElem){
btnElem = document.createElement("button");
btnElem.textContent = "Save Button";
btnElem.onclick = btnClicked;
btnElem.className = "mySaveButton";
}
var charLength = input.value.length;
if (charLength > 0){
document.body.append(btnElem);
}else {
btnElem.remove();
}
};
function btnClicked(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="" onkeyup="myFunction(this)">
</body>
So I think you just want a button to show to the user once they type something in the text box. If that's the case, then you don't really want to append a button every time they press a key in the box.
Instead I'd make a button and set its css to display none and then when they keydown in the text box change the button's css to display block.
Something like this: http://jsfiddle.net/wug1bmse/10/
<body>
<input type="text">
<input class="myButton" type="button" value="button text" />
</body>
.myButton {
display: none;
}
$(function(){
$('input').on('keypress',function(){
var htmlElement= $('.myButton');
htmlElement.css('display', 'block');
});
});
Hiding the element with a class might be easier:
.btn-hidden {
display: none;
}
<input id="save-button" class="btn-hidden" type="button" value="save" />
function showSave() {
$('#save-button').removeClass('btn-hidden');
}
function hideSave() {
$('#save-button').addClass('btn-hidden');
}
I have a text field and a button. Either when the button is clicked or enter is hit, a function should be executed.
My approach works is intended. However, is it possible to combine those 2 functions (click and keypress), so that I only have 1?
$("button").click(function() {
getInput();
});
$("#name").keypress(function(e) {
if (e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
So I need to just append those events.
Here is a fiddle.
You can listen for multiple events using .on('listOfEvents')
Than you just need some additional rules to check when you need to run function.
$("button, #name").on('click keypress', function(e) {
if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<button id="submit">
OK
</button>
function getInput(){
return $(".result").text($("input").val());
}
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="text" />
<button>ok</button>
</form>
<div class="result"></div>
you can wrap your input and button in a form and listen for a submit event on that form. Forms can be submitted by pressing enter in an input inside of them or clicking a button that is enclosed
HTML
<form action="">
<input type="text" />
<button>ok</button>
</form>
Javascript
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
#eltonkamami answer is one idea and my idea is to provide same class for both input field and button like this :
(But, this will trigger whenever input field is changed)
$(".same").bind("click keypress", function() {
getInput();
});
function getInput() {
console.log($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
OK
</button>
Hope it helps :)
We can differentiate a click and keypress by e.key or e.type parameters
Try this,
var getInput = function(e) {
if((e.which & e.which==13) || !e.key)
//e.key is a parameter for keypress event and not for click
alert($("#name").val())
}
$("button").click(getInput);
$("#name").keypress(getInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
Click
</button>
$("button,#name").on("click keypress",function(e) {
//alert($(e.currentTarget).html());
if (e.which == 13) {
getInput();
}else if(event.type == 'click'){
getInput();
}
});
function getInput() {
alert($("#name").val())
}
I have the following html:
<form id="robokassa" action="//test.robokassa.ru/Index.aspx" method="post">
<input type="text" id="OutSum" name="OutSum" value="" placeholder="Сумма пополнения">
<input type="button" name="addMoney" value="Пополнить" class="btn">
</form>
and following js:
$(function () {
$('#OutSum').keypress(function (e) {
if (e.which == 13) {
alert(2);
return false;
}
});
$("input[name='add-money']").on("click",function(){alert(1);});
});
when I click on button - listener doesn't activate.
What do I wrong ?
JSFIDDLE
change add-money to addMoney in the line $("input.... So it should become:
$("input[name='addMoney']").on("click", function () {
alert(1);
});
Because you gave your input a name of addMoney in your HTML but in your JS, you are trying to access an input with a name of add-money.
When I use jquery to clear content of input:
$('input#myinput').val('');
everything is fine except for the user cannot use ctrl+z to obtain the previous text. is there any way to preserve ctrl+z ?
is there any way behaves as if it is cleared by user?
Suppose it gets cleared on clicking a button:
$(document).ready(function() {
var input = $('input#myinput').val();
$('#button').click(function() {
$('input#myinput').val('');
});
$(document).keydown(function(e) {
if (e.which === 90 && e.ctrlKey) {
$('input#myinput').val( input );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myinput" value="text"/>
<input type="button" id="button" value="Button" />