I have a html element which targets when the right and left arrow are pressed. The default behavior is that when shift is pressed and right arrow key or left are pressed it highlights the next letter only and the previous one is not highlighted, it does not highlight them all to copy the word, how can I highlight all the letters when shift and right or left arrow are pressed at the same time. Thank you.
This is my current code:
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(scope) {
scope.keyPress = function(){
var code = event.which;
if (code == 37) {
document.activeElement.selectionEnd--;
var test = false;
if(test == false){
// document.activeElement.selectionStart--;
document.activeElement.selectionEnd--;
if(document.activeElement.selectionStart == 0){
test = true;
document.activeElement.selectionEnd = 0;
document.activeElement.selectionStart = 0;
}
}
if (code == 39) {
event.preventDefault();
document.activeElement.selectionStart++;
//document.activeElement.selectionEnd++;
}
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
<div class="row">
<textarea name="text" unselectable="on" id="text" cols="30" rows="10" ng-keydown="keyPress();"></textarea>
</div>
</div>
my solution: i think im getting closed.
if (event.shiftKey) {
//eval("scope." + callFun + "();");
console.log('shiftKey Pressed');
if (code == 37) {
console.log('arrow Pressed');
}
if (code == 39) {
console.log('arrow Pressed');
document.activeElement.selectionStart == 0;
document.activeElement.selectionStart++;
document.activeElement.selectionEnd++;
}
}
Question:
how can I highlight all the letters when shift and right or left arrow are pressed at the same time.
Answer:
if (code == 37 && event.shiftKey) {
event.preventDefault();
document.activeElement.selectionStart = 0;
document.activeElement.selectionEnd = document.activeElement.textLength;
}
This will select all the lettters when shift and left arrow keys are pressed.
Working example:
https://codepen.io/anon/pen/eEmpQM?editors=1011
Related
I have a text-area with no text inside, if i hit enter the cursor move's to the second row and blinking.
I put some code inside to stop it but still nothing the text-area moves down. example:
function areaOnkeydown(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code === 13) {
if (_text.value === '') {
return; // if there's no text and hit enter.. // return but move to second row
} else {
// do something here..
}
}
}
With 2 words on enter if text-area doesn't have any text remain as is do nothing.
Thanks in advance.
Just cancel the event when the value is empty. This is done using Event.preventDefault() function.
function areaOnkeydown(e) {
var code = (e.keyCode ? e.keyCode : e.which);
var value = e.target.value
if (code === 13) {
if (value === '') {
e.preventDefault()
return;
} else {
// update: added this else 28/11/2022
// so something
}
}
}
textarea.addEventListener("keydown", areaOnkeydown)
<textarea id="textarea" rows="4"></textarea>
Solved. I post the here the solution that works for me. No more new empty line on enter after text in text-area.
function areaOnkeydown(e) {
var code = (e.keyCode ? e.keyCode : e.which);
var value = e.target.value;
if (code === 13) {
if (value === '') {
if (value && value.indexOf('\n') > -1) {
e.preventDefault();
return;
}
e.preventDefault();
return;
}
onSendText(e); // also i put the e.preventDefault(); here
}
}
Thanks all for the help!
I'm practicing moving around objects when a user presses an arrow key. I've got it so when they press right it moved an object to the right and when they press up it moves it up. However, my function is only able to record 1 of these keypresses at once, so they can't move diagonally:
document.onkeydown = function(e){
if (e.which == 39){ // Move Right
var position = $("#ball1").position();
$("#ball1").offset({left:position.left+2});
}
if (e.which == 38){ // Move Up
var position = $("#ball1").position();
$("#ball1").offset({top:position.top-2});
}
};
Is there a way to respond to both key presses at the same time?
You have to detect both keydown and keyup
var key = {};
document.onkeydown = function(e){
if (e.which == 39 || e.which == 38){ // Move Right
key[e.which] = true;
if (key[39]) {
var position = $("#ball1").position();
$("#ball1").offset({left:position.left+2});
}
if (key[38]) {
var position = $("#ball1").position();
$("#ball1").offset({top:position.top-2});
}
}
};
document.onkeyup = function(e){
if (key[e.which])
delete key[e.which];
};
I am trying to make auto-suggest using ajax with php and mysql. Auto-suggest is working well but I am getting problem with toggling up down with up down keys. I am following this jsfiddle as example for completing my work. But can't get why Navigate function is been called twice. Because it alerts twice when I press down keys.
jquery
var Navigate = function(diff){
displayBoxIndex += diff;
var oBoxCollection = $("#searched a .searchFull");
if (displayBoxIndex >= oBoxCollection.length) {
displayBoxIndex = 0;
alert("A");
}
if (displayBoxIndex < 0) {
displayBoxIndex = oBoxCollection.length - 1;
alert("B");
}
var cssClass = "selected";
oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}
$(document).on('keypress keyup', "#search", function (e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$('.display_box_hover').trigger('click');
return false;
}
if (e.keyCode == 40) {
//down arrow
Navigate(1);
}
if (e.keyCode == 38) {
//up arrow
Navigate(-1);
}
});
HTML
<div id="searched" style="display: block;">
<a href="http://localhost/c2c/init/product/78">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/77">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/76">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/73">
<div class="searchFull">
</a>
Here is the solution for your issue:
You call two events like: keypress and keyup. So, it will call twice.
Just remove one like here i remove keypress and here it works well.
$(document).on('keyup', function (e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$('.display_box_hover').trigger('click');
return false;
}
if (e.keyCode == 40) {
//down arrow
//alert("down");
Navigate(1);
}
if (e.keyCode == 38) {
//up arrow
Navigate(-1);
}
});
Check Fiddle here.
And as per comment Here selected class not removed checked in firebug. See below image.
Hope it helps.
I need an event that gives one click right, up, down or left. Below is the logic:
if (gesture.left) {
Click Event for left direction
} Else if (gesture.right) {
Click Event for right direction
}
I need to detect only one condition after the click button
Try this code:
$(function(){
$('html').keydown(function(e){
if(e.keyCode == 37) { // left
}
else if(e.keyCode == 39) { // right
}
else if(e.keyCode == 38) { // up
}
else if(e.keyCode == 40) { // down
}
});
});
arrow keys are only triggered by onkeydown, not onkeypress
keycodes are:
left = 37;
up = 38;
right = 39;
down = 40;
or you can look at this thread sample
What I need to do is to move the div element around the text string depending on the pressed arrow key. Actually the HTML string would look following:
mytextpharse<div class="blink"></div>
then, on the .keyUp event I'm gonna pick informations on which button was pressed (event.which) and if pressed key is the 37 or 39 (which are: left, right arrow keys) I would like to move the div.blink to the right direction based on the event.whichbutton pressed. So if I would press the left arrow key twice it should format the string into the following format:
mytextphar<div class="blink"></div>se
Could that be done in jQuery? If so, I need ideas on which functions should I use.
this should do the trick (using search and substr): (jsfiddle)
$( document ).keyup(function(e) {
if(e.which == 37)
{
var str = $("#content").html();
str = str.substr(0,str.search(/<div/)-1) + '<div class="blink"></div>' + str.substr(str.search(/<div/)-1,1) + str.substr(str.search(/<\/div>/)+6);
$("#content").html(str)
}
if(e.which == 39)
{
var str = $("#content").html();
str = str.substr(0,str.search(/<div/)) + str.substr(str.search(/<\/div>/)+6,1) + '<div class="blink"></div>' + str.substr(str.search(/<\/div>/)+7);
$("#content").html(str)
}
});
html:
<div id='content'>
mytext<div class="blink"></div>pharse
</div>
Here is your answer
CODE
HTML:
<div id="www">mytextpharse<div class="blink"></div></div>
JQUERY
$(document).ready(function(){
$pos = 3
$("body").keydown(function(e) {
if(e.keyCode == 37) {
if($pos > 1){ pos($pos-1);$pos--}
else{pos(3);$pos = 3; }
}else if(e.keyCode == 39) {
if($pos < 3){ pos($pos+1); $pos++
}else{
pos(1); $pos= 1
}
}
});
function pos($step){
console.log($step)
switch($step){
case 1:
$('#www').html('<div class="blink"></div>mytextpharse')
break;
case 2:
$('#www').html('mytext<div class="blink"></div>pharse')
break;
case 3:
$('#www').html('mytextpharse<div class="blink"></div>')
break;
}
}
})
Fiddle http://jsfiddle.net/krunalp1993/zEazF/2/
Hope it helps you :)