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;
}
}
Related
I'm trying to set up a input box using a div, but I'm having some difficulty finding how to clear the text box upon pressing enter.
I've searched for a solution and have found this code that uses an eventListener and a function.
var messageinputbox = document.createElement("input");
messageinputbox.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById('chatbox').value = "";
}
});
document.getElementById("messageinput").appendChild(messageinputbox);
The fuction does not work, even though I do not see any syntax errors in it, and my javascript file doesn't give me any errors.
You never gave the new input box the ID chatbox. You need
messageinputbox.id = "chatbox";
But there's no need for the ID, since the messageinputbox variable holds a reference to the input box. Just use that variable in the function.
var messageinputbox = document.createElement("input");
messageinputbox.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
messageinputbox.value = "";
}
});
document.getElementById("messageinput").appendChild(messageinputbox);
<div id="messageinput"></div>
Try this sample code:
<html>
<head>
<title>Javascript key press demo</title>
<script type='text/javascript'>
function clearTextonEnterKeyPress(e){
if(e.keyCode == 13){
alert("You Have Pressed Enter Key.");
document.getElementById('test').value = "";
alert('Text Cleared');
}
}
</script>
</head>
<body>
Press Enter Button in text box
<input type='text' onkeypress='clearTextonEnterKeyPress(event)' id='test'>
</body>
</html>
Consider the following sample code, based on this answer.
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script>
$(this).ready( function() {
$("#foobar").keydown(function(e) {
if (e.keyCode != KeyEvent.DOM_VK_UP) {
console.log("Foo Bar");
var f = jQuery.Event("keydown");
f.which = KeyEvent.DOM_VK_UP;
f.keyCode = KeyEvent.DOM_VK_UP;
$("#foobar").trigger(f);
e.preventDefault();
e.stopImmediatePropagation();
}
else {
console.log("Hello World");
}
});
})
</script>
<div id="foobar" contenteditable="true">
Foo Bar
<br>
Bar Bar
</div>
</body>
The output of this example is that the following is printed to the console very time a key is pressed. However, only when the real Up is pressed, does the cursor move up.
Foo Bar
Hello World
This implies that the trigger worked, but the cursor does not move up.
How can I make the cursor behave exactly as if the user had pressed the Up key on his keyboard when any key is pressed, not just a real Up?
I also tried the following way of triggering, which was also unsuccessful, despite printing true for success.
var evt = document.createEvent("KeyboardEvent");
evt.initKeyEvent ("keypress", true, true, window,
0, 0, 0, 0, KeyEvent.DOM_VK_UP, KeyEvent.DOM_VK_UP);
var success = document.getElementById("foobar").dispatchEvent(evt)
console.log(success)
How can I make the key a appear in the div when any key is pressed,
not just a real a?
Try substituting KeyboardEvent for KeyEvent , utilizing .html(function(index, html))
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script>
$(this).ready( function() {
$("#foobar").keydown(function(e) {
if (e.keyCode != KeyboardEvent.DOM_VK_A) {
console.log("Foo Bar");
var f = jQuery.Event("keydown");
f.which = KeyboardEvent.DOM_VK_A;
f.keyCode = KeyboardEvent.DOM_VK_A;
$("#foobar").html(function(_, html) {
return html + "a"
}).trigger(f);
e.preventDefault();
e.stopImmediatePropagation();
}
else {
console.log("Hello World");
}
});
})
</script>
<div id="foobar" contenteditable="true">
Foo Bar
<br>
Bar Bar
</div>
</body>
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
If the user press enter key, it should behave as he is pressing the esc key.
function OnEditorKeyPress(editor, e) {
if (e.htmlEvent.keyCode == 13) {
e.htmlEvent.keyCode = 27;
//treeList.CancelEdit();
}
}
But the value 13 remains same after e.htmlEvent.keyCode = 27; this statement also. How to assign a new value or any other alternative method is there to do this?
These properties of the event object are read only (including KeyCode), so you can't do such of thing. Why you can't do something like this?
function OnEditorKeyPress(editor, e) {
//If user press enter or escape
if (e.htmlEvent.keyCode == 13 || e.htmlEvent.keyCode == 27) // correct comparison operation
{
treeList.CancelEdit();
e.htmlEvent.preventDefault
}
}
EDIT: If you insist, read this on the Mozilla Forums: Need to override key pressed replacing keycode
Hi this code helps you in stopping the default functionality of "Enter" button However you can enter your code to do whatever you want when user press "enter". Though Implementing ESC functionality on ENTER will not be appreciated.
Here is working example http://jsfiddle.net/Z4dgr/11/
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function displayunicode(e){
e.preventDefault();
var unicode=e.keyCode? e.keyCode : e.charCode
alert(unicode)
}
</script>
<form>
Enter from keyboard <input type="text" size="2" maxlength="1" onkeypress="displayunicode(event); this.select()" />
</form>
</body>
</html>
According to Tom's answer here is what you need.
function OnEditorKeyPress(editor, e) {
//If user press enter or escape
if (e.htmlEvent.keyCode == 13 || e.htmlEvent.keyCode = 27)
{
treeList.CancelEdit();
e.htmlEvent.preventDefault();
}
}
I need to have a number that's displayed on a web page that will increase or decrease when the up or down arrow keys are pressed. I found/massaged together javascript file to do this but I can't seem to get it to work with my HTML. I was trying to link it to a html textbox but it would not work.
if someone could help me with the HTML to get this working that would be great.
var setTimeoutId;
var keyIs = "up";
function myIncrementFunction()
{
var num = parseFloat(myText.value)+1;
myText.value = num;
}
myText.onkeydown = function(e)
{
keyIs = "down";
if(keyIs == "down")
{
var e = e || event ;
if (e.keyCode == 38)
{
for(var s=0; s<1; s++)
setTimeoutId = setTimeout('myIncrementFunction()',100);
}
}
}
myText.onkeyup = function(e)
{
keyIs = "up";
}
Tried this and it still is not working.. > ?
number.html
<html>
<head>
<script type="text/javascript" src="number.js"></script>
</head>
<body>
<input type="text" id="myText" />
</body>
</html>
number.js
var myText = document.getElementById("myText");
// Capture keyDown events
myText.onkeydown = function(e) {
// "38" is the up arrow key
if (e.keyCode == 38) {
// increment the value in the text input
myText.value++;
// "40" is the down arrow key
} else if (e.keyCode == 40) {
// decrement the value in the text input
myText.value--;
}
}
I don't understand why it works in the example posted and when I save my files and open it in the browser it will not work!
I'm on OSX Lion using Chrome/Safari
It looks like there are a couple of things going on. First, as jayp points out in his comment, you aren't defining what myText is.
Secondly, I think you're over-complicating this a bit. How about trying something like this:
Give your text input an ID, something like <input type="text" id="myText" />
Then use something like this:
// Assign our text input to a variable
var myText = document.getElementById("myText");
// Capture keyDown events
myText.onkeydown = function(e) {
// "38" is the up arrow key
if (e.keyCode == 38) {
// increment the value in the text input
myText.value++;
// "40" is the down arrow key
} else if (e.keyCode == 40) {
// decrement the value in the text input
myText.value--;
}
}
This is a pretty simplified example, but should get you pointed in the right direction. Hope it helps.
See a working example at JSFiddle
Edit:
It's not working in your case because the script is trying to find the input element before the page is fully loaded. You can move your script to the bottom of the page like this:
<html>
<head></head>
<body>
<input type="text" id="myText" />
<script type="text/javascript" src="number.js"></script>
</body>
</html>
In your number.js, you are increasing the value of the text field, but you have no value originally set, therefore there is nothing to increase.
Try editing your HTML so that you have:
<input type="text" id="myText" value="" />
There's a small jQuery plugin for doing this: https://github.com/nakupanda/number-updown
Usages:
$('#textInput').updown();
View live demo here: http://jsfiddle.net/XCtaH/embedded/result/
Keyboard and mousewheel events supported