I have to achieve this:
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)
My work so far:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
loadHandler = function(){
$("#selector").mouseover(function(e){
if(e.ctrlKey) {
//what do I have to write here so that holding CTRL will be recognized ?
}
});
}
</script>
</head>
<body onload="loadHandler();">
<button type="button" onmouseover="document.getElementById('center').style.visibility = 'visible'">CTRL+mouseover</button>
<div id="center" onmouseout="this.style.visibility = 'hidden'">
<h1>Text text text</h1>
</div>
</body>
</html>
Link
I have to admit that I just started to learn JS so please help me out :)
how to make holding CTRL and mouse over be recognize at the same time ?
Working sample,
MouseEvent.shiftKey, MouseEvent.ctrlKey
MouseEvent.ctrlKey
MouseEvent.shiftKey
<img onmouseover="keypress_test(event)" onmouseout="keypress_test(event)">
function keypress_test(event) {
// false, no press,
// true, pressed
console.log(event.ctrlKey)
console.log(event.shiftKey)
if (event.ctrlKey) {
// hide text
}
}
Perfectly working version
$(document).ready(function(){
var keyPressed = false;
var mouseovered = false;
$("#center").mouseover(function(e){
doStuff();
mouseovered = true;
});
$("#center").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"});
}
});
I just haven't hidden the text by default. Or else It will be hard for yo find where it is currently. And don't forget to click on the body before checking. Else keypress wont be detected.
Working Fiddle
Related
I need help with this function. Clicking a button, the onkeyup event present in the body tag must be deactivated, and then pressing it again must reactivate
<body onkeyup="NoPreview()">
...
</body>
function NoPreview() {
var preview = true;
if (preview == true) {
document.body.onkeyup = null;
preview = false;
} else {
return true; }
}
the function was deactivated, but clicking again on the button, does not reactivate.
You can keep a global variable and store the status of your setting, like this
<body onkeyup="NoPreview()">
<button onClick="toggleKeyup()">Toggle</button>
</body>
and the js:
var enableKeyup = true;
function toggleKeyup() {
enableKeyup = !enableKeyup;
}
function NoPreview() {
if(enableKeyup) {
// Your code here...
document.body.appendChild(document.createTextNode("."));
}
}
this way you don't have to add and remove events and you can have more settings for your NoPreview function.
Here's a pen: https://codepen.io/wyzix33/pen/bXBPbz
Hope it helps :)
Happy codding!
I am interested in creating an automated script that enter a status which are shown in textbox before submitting. I wish I can enter the textbox using keyboard event because I think there are some bot detection which implement the keyboard event check so simply textarea.value = "something" would not work.
Here are my code :
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>
<body>
<textarea id="reply_message"></textarea>
<script>
window.onload = function() {
$('#reply_message').focus();
var e = $.Event('keydown', {
keyCode: 65
});
$('#reply_message').trigger(e);
}
</script>
</body>
</html>
I hope to enter letter 'a' on it, but it simply wont work, can anyone tell me how to do this? Thanks
Maybe try something like this:
function onTestChange() {
var key = window.event.keyCode;
// If the user has pressed enter
if (key === 13) {
document.getElementById("txtArea").value = document.getElementById("txtArea").value + "\n*";
return false;
}
else {
return true;
}
}
Hello I want to make a gif appear while I m clicking in Ctrl key but when I stop I want to show an image.
My code make the gif appear when I click Ctrl but if I stop the gif keeps.
CODE:
document.addEventListener('keydown', function(event) {
if(event.keyCode == 17) {
document.getElementById("key").innerHTML = "<img src=\"stick.gif\">";
shoot -= 1;
document.getElementById("shoot").innerHTML = shoot;
}
}
Try this.I have made a key-up event that replaces the GIF when the key is not pressed.You can make this react specifically to the Ctrl key as well.I have added the two ID tags for elements, since you had not attached any HTML elements.
As the comment above mentioned, you need a Keyup function to handle the event when the key is not pressed.
<script>document.addEventListener('keydown', function(event) {
console.log("Event");
if(event.keyCode == 17) {
console.log("Key Pressed");
document.getElementById("key").innerHTML = "<img src=\"stick.gif\">";
shoot -= 1;
document.getElementById("shoot").innerHTML = shoot;
}
});
document.addEventListener('keyup', function(event) {
document.getElementById("key").innerHTML = "This key is up"
});
</script>
<p id="key">Hello</p>
<p id="shoot">Shot</p>
I am trying to set some text in window for single and double click in jquery.
But I am facing the ambiguity for double click.
When trying to do double click , first single click function works and then double click works.
Similar question is here check here and it was very old. Also it has some problem.
Any new answer using the latest jquery version.
Check the live demo here of my problem live demo
This my code ,
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<a id="press" href="http://jquery.com">Click here</a>
<div id="log"></div>
<script>
$("#press").click(function(event) {
event.preventDefault();
$("#log").text("I am single click !");
return false;
});
$("#press").dblclick(function(event) {
event.preventDefault();
$('#log').text("I am double click !");
return false;
});
</script>
</body>
</html>
Hope our stack users will help me.
The way around the problem is to use a timeout for the click event to give the user time to doubleclick.
If the user clicks twice within a certain timeframe, it's a doubleclick, if the user only clicks once, it's a normal click:
$('#press').click(function (event) {
event.preventDefault();
if ( $(this).data('dblclicked') ) {
$('#log').text('No google today!');
clearTimeout( $(this).data('clicked') );
$(this).data('dblclicked', false);
}else{
var self = this;
$(this).data('dblclicked', true).data('clicked', setTimeout(function() {
$('#log').text('google !');
$(self).data('dblclicked', false);
},300));
}
});
FIDDLE
I got the closest solution by ,
<a id="press" href="javascript:void(0)" onclick="singleClick(event)"
ondblclick="doubleClick(event)">Click here</a>
<div id="log"></div>
My JavaScript will be ,
var timer;
var status = 1;
function singleClick(event) {
event.preventDefault();
status = 1;
timer = setTimeout(function() {
if (status == 1) {
alert("I am single click !");
document.getElementById("log").innerHTML ='I am single click !';
}
}, 500);
}
function doubleClick(event) {
event.preventDefault();
clearTimeout(timer);
status = 0;
alert("I am double click !");
document.getElementById("log").innerHTML = 'I am a double click!';
}
I am trying out this following code. It is supposed to change the sh attribute of the input to 1 whenever the shift key is pressed, and revert back to 0 when released
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(document).on("keyup","body",function(e) {
if (e.which == 16) {
$("input").attr("sh","0");
}
});
$(document).on("keydown","body",function(e) {
if (e.which == 16) {
$("input").attr("sh","1");
}
});
});
</script>
</head>
<body>
<input type = 'text' sh = '0'/>
<p>Just checking</p>
</body>
</html>
It works fine, except when this sequence of events is executed. Press the shift key while the input is not in focus. (Firebug shows sh becoming 1, as expected). Now with the key still pressed, focus in on the input. Now do a right click on the input. The context menu pops up. Now if you release the shift key (let the contextmenu remain), Firebug shows that sh is still 1. You click outside the contextmenu to make it go, or even click the paste option to paste your clipboard text in the input, still sh remains 1. If you again press and release shift, only then sh becomes 0 again.
Any idea how to fix this?
Does the following help you?
I am not sure I simulated your scenario correctly, but seems to work for me. I tested in Chrome.
$(document).ready(function () {
$(document).keyup(function (e) {
if (e.which == 16) {
$("input").attr("sh", "0");
console.log($("input").attr("sh"));
}
});
$(document).keydown(function (e) {
if (e.which == 16) {
$("input").attr("sh", "1");
console.log($("input").attr("sh"));
}
});
//Works... (holding shift will raise keydown as much as I hold the key...)
//$(document).keyup(function (e) {
// if (e.keyCode == 16) {
// console.log("Shift was released...");
// }
//});
//$(document).keydown(function (e) {
// if (e.keyCode == 16) {
// console.log("Shift was pressed down...");
// }
//});
});