I have two textboxes and one Button control.....In first TextBox when press enter key moves to next textbox(Barcode) and when i press enter in barcode textbox it fires the button click event......till that its ok....
But what happening after fireing the Button click even on enter in Barcode Textbox its going back to focus on first textbox.........But i want this to stay in same Barcode TextBox to scan more barcodes.
The code is below.
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<Head>
<script type="text/javascript">
$(function() {
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function(e) {
//var key = (e.keyCode ? e.keyCode : e.charCode);
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>
</Head>
You're handling keydown for every textbox.
You need to modify your selector to only handle keydown for the first textbox.
The button click is causing a postback to the server and reloading the page, which re-executes the javascript you posted including this line:
$('input:text:first').focus();
which sets focus on the first text input.
I can't offer much of a solution without the HTML, but hopefully understanding the cause can point you in the right direction.
Related
I'm using contenteditable so as people can edit a text.
So when you edit the text thas has contenteditable = true, if you click somewhere else in the page, it will "validate" your text and replace the older.
That's not the comportment I'd like it to have because the user has no way to get back to the older text except by refreshing the page.
To me, it should validate the text only if you press the Enter Key and not if you click somewhere else. If you click somewhere else then it should get back to the older text.
Any idea how to make it ?
Thanks ! :)
When the user clicks the box, you can store its value into a var, and when they click away, reset the box to that var.
If the Enter key doesn't already validate, here's some pseudocode as to what you could do:
var oldvalue = "";
function OnClickBox() {
oldvalue = (yourelement).value;
}
function OnClickAway() {
(yourelement).value = oldvalue;
}
function Validate() {
(yourelement).value = yourvalidationfunction(yourelement.value);
}
document.onkeydown = function (e) {
key = e.which || e.KeyCode;
if (e.keyCode === 16) { //enter key
Validate();
}
}
Then you assign the box's onclick to OnClickBox(), and unselecting the box to OnClickAway().
And for future posts, please include some code as to what you have tried already, and for better context as to your question.
I have two solutions so far but none of them work. Can anyone lead me in the right direction ?
I am trying to achieve the folowing:
Hide text in a div
User will press Ctrl key, then put his mouse over a button - a javascript function has to be called, and the text in the div should be displayed
If the User releases the Ctrl key - the text should disappear (even if the mouse is on the button), similarly if the User moves the mouse out from the button - the text should disappear (even if the Ctrl key is pressed)
First try:
<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#center").css("visibility","hidden"); //Hidden text in the beginning
$("#select").mouseover(function(e){
while(e.ctrlKey)
$("#center").css("visibility","visible");
$("#center").css("visibility","hidden");
}).mouseout(function(){
$("#center").css("visibility","hidden");
});
});
</script>
</head>
<body>
<button type="button" id="select">CTRL+mouseover</button>
<div id="center">
<h1>Text text text</h1>
</div>
</body>
</html>
The second try:
http://jsfiddle.net/o0q5nszz/10/
As a resume, the idea of the entire code is that holding CTRL + mouseover on a button reveals a hidden text. Can anyone lead me in the right direction ?
I added a button and attached the previous #center mouse events on the button
see this working fiddle: http://jsfiddle.net/o0q5nszz/11/
$(document).ready(function(){
$(document).focus();
var keyPressed = false;
var mouseovered = false;
$("#btn").mouseover(function(e){
doStuff();
mouseovered = true;
});
$("#btn").mouseout(function(){
doStuff();
mouseovered = false;
});
$(document).keydown(function(e){
doStuff();
if (e.ctrlKey)
{
keyPressed = true;
}
else keyPressed = false;
});
$(document).keyup(function(e){
if (keyPressed)
{
keyPressed = false;
}
doStuff();
});
function doStuff()
{
if(mouseovered && keyPressed) $("#center").css({"color": "#000"});
else $("#center").css({"color": "#fff"});
}
});
You can do old way, but in 2019, you could do new way:
MouseEvent.ctrlKey read-only property is a Boolean
<img onmouseover="bigImg(event)" onmouseout="normalImg(event)">
function bigImg(event) {
// false if no ctrl key, true, if pressed
console.log(event.ctrlKey)
}
I have this obfuscated webpage that contains a text-area,
When a user manually inserts text and presses Enter key while editing the text area an event that changes the DOM launches.
I need to pragmatically launch that event,
I know how to get to the text-area itself (using getElementsByName)
and I'm basically inserting text via textArea.value = ''
How do I get that event to launch?
Could you call a function when enter is pressed, and then also just call that function when you want to simulate enter being pressed?
element.addEventListener("keypress", function(event){
if (event.keyCode == 13) {
// Enter has just been pressed.
enterPressed();
}
});
function enterPressed(){
// Do whatever you do when enter is pressed.
}
// Somewhere else off in your code when you want to "trigger" the enter press event:
enterPressed();
is this what you want
document.getElementById("id_of_your_textarea").addEventListener("keydown", function(e) {
if (!e) { var e = window.event; }
e.preventDefault(); // sometimes useful
// Enter is pressed
if (e.keyCode == 13) { document.getElementById("id_of_your_textarea").value = '' }
}, false);
EDIT: based on your comment, you can use the trigger
if you can use jQuery.
$('#textArea').trigger('keydown');
I have a web application that I am testing with HP's UFT software. Within my application,
there is a text field with an onkeydown attribute. When a key is pressed within the text field, a function is called which triggers different actions depending on what key was pressed. I am interested in the enter key. When the enter key is pressed, rows are created within the form. How can I simulate the enter key being pressed within the field?
I have tried
field1.Set Chr(13)
field1.FireEvent "onkeydown"
but it doesn't trigger the event.
I am trying aviod using the SendKeys command.
If you use device replay mode (as described in this answer) and send a vbCRLF your application will be able to see the enter key.
Setting.WebPackage("ReplayType") = 2 ''# Changes to device mode
Browser("Enter").Page("Enter").WebEdit("WebEdit").Set "a" & vbCRLF
This works (on IE) for the following sample page:
<!DOCTYPE html>
<html>
<head>
<title>Enter</title>
<script>
function okd() {
if (event.keyCode == 13)
alert("Got enter");
}
</script>
</head>
<body>
<textarea onkeydown="okd()"></textarea>
</body>
These are the some methods i have tried for simulate keyboard events and worked for me..
Set oShell = CreateObject("WScript.Shell")
oShell.SendKeys "{TAB}" ' Click Tab Key
oShell.SendKeys "{ENTER}" ' Click Enter\Return
Also i have used
Type micAltDwn + "RETURN" + micAltUp ' Click Tab Key
Type micAltDwn + "TAB" + micAltUp ' Click Enter\Return
If u Want to enter characters
oShell.SendKeys "{h}" ' Click h Key
oShell.SendKeys "{i}" ' Click i Key
Type micAltDwn + "h" + micAltUp ' Click h Key
Type micAltDwn + "i" + micAltUp ' Click i Key
WORKING FIDDLE
$(document).keyup(function (e) {
$("#my_id").keyup(function (e) {
if (e.keyCode == 13) {
alert("Enter Simulated!!!")
//your function goes here!!!
}
});
});
UPDATE:2nd demo
Is there a way to stop a webpage from refreshing completely when the enter button is pressed in a input text element?
I'm looking to create a search field that I can get the text from when enter is pressed to filter objects and only display the ones that contain text from the search field.
I've tried the following to try and catch the enter button but it does not work.
function setupSearchField() {
document.getElementById("searchField").onKeyDown = function(event) {
var holder;
if (window.event) {
holder = window.event.keyCode;
} else {
holder = event.which;
}
keyPressed(holder);
}
}
function keyPressed(key) {
if (key == 13) {
event.cancelBubble = true;
return false;
}
}
If the input element is inside a form, and that form is not actually being submitted to the server, remove the form.
The reason your code doesn't work is becaue the onkeydown event should be in lowercase, and you aren't actually returning something in it (try return keyPressed(holder); - or just move the keyPressed function's code into setupSearchField, since it seems kind of pointless to me to have it as a separate function).
This happens when there is only one text input, regardless of whether your button (if any) has type="submit" or not. It's documented here.
http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
So, as suggested by other people earlier, you then have to simply stop this default behavior.
Is your search field inside a element ? Then hitting 'enter' fires a submit event to the form element.
In this case you could process your filtering by defining onsubmit on the form element.
<form id="searchForm">
<input type="text" name="search" />
</form>
<script>
document.getElementById('searchForm').onsubmit = function() {
var searchValue = this.search.value;
// process
return false;
}
</script>
Something like this maybe.
Just add the following javascript code to your Visualforce page:
<script type='text/javascript'>
function stopRKey(evt)
{
var evt=(evt) ? evt : ((event) ? event : null);
var node=(evt.target)?evt.target:((evt.srcElement)?evt.srcElement:null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>