How to clear text input box on pressing enter (in a div)? - javascript

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>

Related

How to fire keyboard event to enter text in textarea javascript

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;
}
}

JS Event CTRL + mouse over + hide text

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

How to get focus on a single textbox except on some conditions?

I want to set the focus in a single textbox and some text must be entered in the textbox to move the focus out of it. But there is an exception that I should be able click on the buttons on the page without any entry in that textbox.
Here is what I have done using JavaScript...
function Validate() {
var field1 = document.getElementById('<%=textbox.ClientID %>').value;
if (field1 == "") {
alert("Please Enter some value");
document.getElementById('<%=textbox.ClientID %>').focus();
return false;
}
else {
return true;
}
}
And I have called it like...
onblur="return Validate();"
This is the Script. (jquery required)
$(function() {
$('input[id=word]').blur(function() {
var txtClone = $(this).val();
if(txtClone=="")$(this).focus();
});
});
and here is a html tag
<input type='text' id='word' name='word'>
As you've asked, focus won't move away unless you entered some text and able to click on button outside.

need to click 2 times to lose focus

In my form, I have some fields on which I have applied onblur event. Problem is if I click on save directly after entering some field, save does not get called. I need to click twice.
For more clarifications, refer to steps below and code snippet is also attached.
1) Enter some value in input box
2) Lose focus by either tabing out or clicking somewhere else on screen
3) it works fine and function triggerOnBlur gets invoked
4) now enter some value in input box again
5) straight away click on save button, without clicking anywhere else
6) function triggerOnBlur gets invoked, but in order to click save button, I need to click on save.
I want to get it done in one click..
<!DOCTYPE html>
<html>
<head>
<script>
function triggerOnBlur()
{
alert("onblur event triggered");
}
function triggerSaveButton()
{
alert("save button");
}
</script>
</head>
<body>
<form>
<input type = "text" onblur = "triggerOnBlur()" />
<input type = "submit" value = "Save" onclick = "triggerSaveButton()" />
</form>
</body>
</html>
You could always do something like:
function triggerSaveButton()
{
var inputs = document.getElementsByTagName("input"), input = null;
for(var i = 0, len = inputs.length; i < len; i++) {
input = inputs[i];
if(input.type == "text" && input == document.activeElement) {
input.blur();
}
}
// onblur triggered, now continue with function
alert("save button");
}
Because your alert() break the click event, click event need you release mouse key on the button, if you must use alert(), you may use onmousedown event, look at this example
http://jsfiddle.net/3w8VM/

Increase Number Value Displayed on Screen

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

Categories

Resources