We Keep Coding

Highlight letter when shift and left or arrow pressed

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

Can't to unfocused mouse from list when move keypress

I can't disable focus element on list where mouseenter, i wan't focus follow mouse or keypress down or up.
I'm tried function unbid("mouseenter") when we press button but that unfortunately not work.
I'm tried run this code on fiddle but this not work sorry.
I have fallowing html
<input id="text" type="text" />
<div class="dropdown dropdown-tip">
<div class="dropdown-toggle" data-toggle="dropdown"></div>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1"></ul>
</div>
jQuery code
var data = ['asdf',
"asdw", "wequiye", "sagdsaj", "weoqiu"];
$("#text").on("input", function(e){
var a = "";
$.each(data, function(index, value){
a +="<li class='sd'><a href='#'>" + value + "</a></li>";
});
$('.dropdown-menu').empty().append(a);
$(".dropdown-toggle").dropdown("toggle");
});
$("#text").on("click", function(e) {
e.stopPropagation();
});
$('.dropdown-menu').on("keydown mouseenter", "li", function(e){
var code = e.keyCode || e.which;
if(code == 40) {
$(this).find("a").focus();
}else if (code == 38) {
$(this).find("a").focus();
}
else if(e.type == "mouseenter") {
$(this).find("a").focus();
}
});
$("#text").keydown(function( e ){
var code = e.keyCode || e.which;
if(code == 40) {
$('.dropdown-menu').find("li:first-child > a").focus();
}
});
Fiddle: http://jsfiddle.net/BVmUL/1354/

Add arrow key navigation to site with variable in page

I would like to add this code to allow navigation through a website with left and right arrows. Is there any way to assign the window.location variable from an image that is linked on that page? I'm trying to make the left and right arrows on the page that are used for navigation on the page to be assigned to the left and right arrows on the keyboard.
img src="leftarrow.png" = previous page
img src="rightarrow.png" = next page
Code to be used: (other code is fine too)
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
document.onkeydown=keydownie;
} else {
document.onkeydown=keydown;
}
function keydownie(e) {
if (!e) var e = window.event;
if (e.keyCode) {
keycode = e.keyCode;
if ((keycode == 39) || (keycode == 37)) {
window.event.keyCode = 0;
}
} else {
keycode = e.which;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39){
window.location = '!!NEXT_URLHERE!!';
return false;
}
}
function keydown(e) {
if (e.which) {
keycode = e.which;
} else {
keycode = e.keyCode;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39) {
window.location = '!!NEXT_URLHERE!!';
return false;
}
}

Assuming the image is wrapped in an anchor tag (otherwise how would it work?), you could do something like this:
if (keycode == 37) {
img = document.querySelector("img[src='leftarrow.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='rightarrow.png']");
window.location = img.parentElement.href;
return false;
}
We're looking for the appropriate image/navigation link and getting the url from it's anchor container.

Web page change when left or right arrow in keyboard pushed

i want to ask how can i change the web page when the arrow key pushed by user , like a web of manga/book if we want to next page we just push the arrow key
sorry for my english , thanks before

You can use jQuery for that:
$(document).keydown(function(e) {
if (e.which == 37) {
alert("left");
e.preventDefault();
return false;
}
if (e.which == 39) {
alert("right");
e.preventDefault();
return false;
}
});

If you wish to use the jQuery framework, then look at Binding arrow keys in JS/jQuery
In plain javascript, I'll go with :
document.onkeydown = function (e) {
e = e || window.event;
var charCode = (e.charCode) ? e.charCode : e.keyCode;
if (charCode == 37) {
alert('left');
}
else if (charCode == 39) {
alert('right');
}
};

Here is a non jQuery option:
document.onkeydown = arrowChecker;
function arrowChecker(e) {
e = e || window.event;
if (e.keyCode == '37') { //left
document.location.href = "http://stackoverflow.com/";
}
else if (e.keyCode == '39') { //right
document.location.href = "http://google.com/";
}
}

Jquery increase/decrease number in input text by up/down arrows keyboard

I have a basic quantity field and would like to allow the user to increase/decrease the number within this input box based on the keyboard up/down.
Following on from: EndangeredMassa answer on keyboard code https://stackoverflow.com/a/375426/560287 how would I add this into a keyup function?
var keynum = 0;
if(window.event) { keynum = e.keyCode; } // IE (sucks)
else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera
if(keynum == 38) { // up
//Move selection up
}
if(keynum == 27) { // down
//Move selection down
}

//cache our input since we will be working with it each time an arrow key is pressed
var $input = $('input');
//bind the the `keydown` event for the `document` object which will catch all `keydown` events that bubble up the DOM
$(document).on('keydown', function (event) {
//up-arrow (regular and num-pad)
if (event.which == 38 || event.which == 104) {
//make sure to use `parseInt()` so you can numerically add to the value rather than concocting a longer string
$input.val((parseInt($input.val()) + 1));
//down-arrow (regular and num-pad)
} else if (event.which == 40 || event.which == 98) {
$input.val((parseInt($input.val()) - 1));
}
});
Here is a demo: http://jsfiddle.net/QRNP8/1/
Note that jQuery normalizes the charCode/keyCode properties into event.which:
Query normalizes the following properties for cross-browser
consistency:
target
relatedTarget
pageX
pageY
which
metaKey
Source: http://api.jquery.com/category/events/event-object/

Setting your input type to number will work as well. Though this won't work too great in IE9 and below.
<input type="number">
Source: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

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

$("input").keypress(function(event) {
var val=$(this).val();
if ( event.keyCode== 38) {
val++
$(this).val(val)
}
if ( event.keyCode== 40) {
val--
$(this).val(val)
};
});

You could do:
<input type="text" id="yourinput" value="0">
$(document).on("keypress", '*', function(e) {
if (e.keyCode == 38) { // up
$('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1);
}
if (e.keyCode == 40) { // down
$('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1);
}
});
fiddle here http://jsfiddle.net/mSCBL/1/

$("something").keyup(function(e){
var keynum = 0;
if(window.event) { keynum = e.keyCode; } // IE (sucks)
else if(e.which) { keynum = e.which; } // Netscape/Firefox/Opera
if(keynum == 38) { // up
//Move selection up
}
if(keynum == 27) { // down
//Move selection down
}
});
Where something is a selector which matches your input(s).

Your codes looks correct-ish. If your just wondering how to bind the code to the event...
$('#itemId').keyup(function(e){
/*YOUR CODE*/
});

This should work
if(keynum == 38) { // up
this.value = parseInt(this.value)-1;
}
if(keynum == 27) { // down
this.value = parseInt(this.value)+1;
}