i'm just starting a typing text project not for english typing text. it's only for Bengali language. my typing project is 99% done for english language but in Bengali language i found a tiny but a big problem.
i have a input box that will match all the word one by one. you type a word and press space it will check the word for matching and after that move for the next word. it's work fine.
how i check that:in inputbox oninput event event.data === " " than move to the next word.
but in Bengali language when i press the key "c" (not as first character but in the middle of word first character) its fired the oninput event multiple time. with various event.data value include the space also. that's why when press c in keyboard its just go to the next word.
now you cannot find out the multiple event in the console because you don't have the software in your machine. so for that i include a screen short of this:
see_the_picture_for_butter_understanding
onkeyup event problem: see_the_picture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#font-face {
font-family: 'SutonnyMj';
src: url('assets/fonts/SutonnyMj.ttf'),
url('assets/fonts/sutonnymj.woff2') format('woff2'),
url('assets/fonts/sutonnymj.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#textbox {
width: 200px;
height: 200px;
font-family: 'SutonnyMj';
font-size: 50px;
}
</style>
<body>
<textarea id="textbox" type="text"></textarea>
<script>
var textBox = document.getElementById("textbox");
textBox.oninput = function(e) {
console.log(event); // multiple event fire when the Software is Enable
if(event.data === " ") {
// move_to_the_next_word();
}
}
</script>
</body>
</html>
Notes: It's happen because i use a software called Bijoy Bangla for writing Bengali. (It's require for Bengali Typing Test)
As mentioned by #Ahmad 'input' event is fired after each change, but you can be more specific using 'keyup' event which will provide you more control and attributes for event object. For example you will be able to handle 'Space' using event.which statement. Here an example:
var textBox = document.getElementById("textbox");
textBox.onkeyup = function(e) {
console.log(event);
if(event.which === 32) { //space keycode
// move_to_the_next_word();
}
}
Try this!
function runScript(e) {
if (e.keyCode == 67) {//c
console.log("you have entred 'c' char")
}
if(e.keyCode == 32){//space
console.log("space ")
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="scriptBox" type="text" onkeyup="return runScript(event)" />
Related
I have an automatically expanding text-area. But when clicking send button, text-area is not going back to original height. I have included a sample code. In the project, its implemented using react. Is there any way to make text area height to "50px" when clicking send button? Thank you
var textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', autosize);
function autosize() {
var el = this;
setTimeout(function() {
el.style.cssText = 'height:auto; padding:0';
el.style.cssText = 'height:' + el.scrollHeight + 'px';
}, 0);
}
.textarea {
overflow: hidden;
padding: 10px;
width: 250px;
font-size: 14px;
margin: 50px auto;
display: block;
border-radius: 10px;
border: 6px solid #556677;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid pl-5">
<div class="row w-70 text-center">
<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>
</div>
<button class="send-btn" onClick={()=> messageSendHandler()}>send</button>
</div>
</body>
</html>
I don't see the messageSendHandler() function description attached to your post. Does it clear the textarea field? If so, when it happens, the keydown event does not occur, and thus the autosize() function is not triggered. So, I can see these 2 ways to choose from:
if you'd like to run this autosize() function on form submit as well, replace keydown event with input event — it is more universal and can help with different input types (such as dictation),
another option would be to reset the textarea height inside the form submit function (messageSendHandler()), similarly to how you do it here:
el.style.cssText = 'height:' + el.scrollHeight + 'px';
Also, alternatively, maybe this CSS-tricks URL can give you more inspiration on the topic.
While working through the application process for a bootcamp, I was tasked with the following JS problem which is above my head. I was successful in testing through the JS console on Chrome but when I attempt to plug the code into the .js file, it does not work. Do I need to apply a boolean expression? If so, what is the best way of coding it?
Here is everything that is in the .js file:
document.addEventListener("DOMContentLoaded", function(event) {
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
// write here
});
});
Here is the problem that is at hand:
"To make the image bigger or smaller, you have to change its class. In your JavaScript console, run this code:
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.className; This displays what the class currently is; it
should be
"small", unless you changed it since.'
To make it big, you should remove the class, by running this:
thumbnailElement.className = ""; To make it small again, you can put it back:
thumbnailElement.className = "small";'
See how it changes from small to big? You should put the line that makes it big in your JavaScript file so that it executes when the user clicks."
You could use the HTMLElement.classList.toggle method to add or remove the class. Here is a small snippet that illustrates how you can do it.
<style>
.small {
transform: scale(0.5);
}
</style>
<button class="small" id="smart_thumbnail">Click me</button>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
// Get the element by id
var thumbnailElement = document.getElementById("smart_thumbnail");
// add the event listener on the element
thumbnailElement.addEventListener("click", function () {
thumbnailElement.classList.toggle("small");
/*
HTMLElement.classList.toggle(className) will remove the class if it is in the class list OR add it if it is not already there.
*/
});
});
</script>
If you simply want to remove it, you can use the remove method instead.
thumbnailElement.classList.remove("small");
if you have the css of the elment in the id and changing its size by class then it will not work here is the code that I wrote to solve
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Answer</title>
<style>
.small{
width: 10%;
height: 10%;
transition: all 1s ease;
}
.notSmall{
width: 30%;
height: 30%;
transition: all 1s ease;
}
</style>
</head>
<body>
<img src="Your Image" class="small" id="smart_thumbnail" alt="The image">
<script>
document.addEventListener("DOMContentLoaded", () => {
let thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
if(thumbnailElement.classList == "small"){
thumbnailElement.classList.remove('small');
thumbnailElement.classList.add('notSmall');
console.log('now image is big')
}else{
thumbnailElement.classList.add('small');
thumbnailElement.classList.remove('notSmall');
console.log('now image is small')
}
});
});
</script>
</body>
</html>
I'm working on a web app which uses simple-keyboard javascript library.
By looking at the source code, I can see that the library synchronizes its internal keyboard buffer and caret position with the input field's ones by executing some sync code (selectionStart) on certain events: keyup, mouseup, touchend.
https://github.com/hodgef/simple-keyboard/blob/master/src/lib/components/Keyboard.js#L574
On a touch device and only in Edge browser, there is an issue with it. The problem is that Edge doesn't seem to allow placing the caret by clicking somewhere within the bounds of the text, but allows the user to drag the caret cursor.
This 'dragging' doesn't seem to fire touchend event, so the input's cursor and virtual keyboard caret go out of sync.
Does anyone know if I can prevent this dragging behaviour in Edge (and allow positioning within the text with a simple touch) or if there is some Edge specific event for dragging the cursor?
Example:
/**
* This seems to work in any browser **Except** on a touch device in Edge browser
*/
document.addEventListener("keyup", caretEventHandler);
document.addEventListener("mouseup", caretEventHandler);
document.addEventListener("touchend", caretEventHandler);
function caretEventHandler(event) {
let targetTagName;
if (event.target.tagName) {
targetTagName = event.target.tagName.toLowerCase();
}
if (targetTagName === "textarea" || targetTagName === "input") {
document.querySelector(".selectionStart span").innerHTML =
event.target.selectionStart;
}
}
body {
font-family: sans-serif;
margin: 0;
}
input {
width: 100%;
height: 50px;
text-align: left;
padding-left: 10px;
}
.selectionStart {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link href="src/styles.css" rel="stylesheet" />
</head>
<body>
<input
class="input"
value="Click anywhere in this string to get selectionStart"
/>
<div class="selectionStart">selectionStart: <span></span></div>
<script src="src/index.js"></script>
</body>
</html>
As the title says, when I add a keydown event listener in my javascript, pressing F-12 won't work.
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented){
return;
}
if (event.key == "w" || event.key == "ArrowUp"){
console.log("test");
}
event.preventDefault();
}, false);
This is the only thing I have to add inside my script tags in my HTML to prevent F-12 from working. The event listener is working tho, I am using the latest version of chrome. I am also importing THREE.js but not importing it doesn't change anything.
Here is the full raw HTML code, if it matters.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script> -->
<style>
body{
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- <script src="script.js"></script> -->
<script>
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented){
return;
}
if (event.key == "w" || event.key == "ArrowUp"){
console.log("test");
}
event.preventDefault();
}, false);
</script>
</body>
</html>
preventDefault(); prevents default behavior
What I want to accomplish: When the user presses the SPACEBAR the image source should change from spacebar.png to spacebar_pressed.png. When the user releases the key the image should change back to the default.
I have looked around everywhere and tried several possibilities but none worked. Bear in mind that I'm not very good with Javascript.
HTML:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/spacebar.js"></script>
</head>
<body>
<h1>Spacebar Simulator 2017</h1>
<img src="assets/spacebar.png" id="spacebar">
</body>
</html>
This is my most recent code I have tried:
$("#spacebar").on("keydown", function(e){
var code = e.keyCode;
if(code == 32){
document.getElementById("spacebar").src="../assets/spacebar_pressed.png";
}
});
You can combine keypress and attr function to accomplish such task.
In the callback, you have your event object, its attribute which is the keyCode, it represents the key that was pressed. The keyCode is 32 for spacebar.
When a key gets released on the DOM, the url changes again explicitly.
$(function() {
var myRealUrl = "http://hammerjs.github.io/assets/img/stackoverflow-icon.svg";
$("body").on("keydown", function(e) {
if (e.which == 32) {
$("#spacebar").attr("src", "https://i.stack.imgur.com/CE5lz.png");
console.log('pressed');
}
});
$("body").keyup(function(e) {
if (e.which == 32) {
$("#spacebar").attr("src", myRealUrl);
console.log('released');
}
});
});
/*Demo Use*/
img {
max-height: 100px;
max-width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://hammerjs.github.io/assets/img/stackoverflow-icon.svg" id="spacebar" />