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 :)
Related
I have a set of buttons and you can navigate them using the left and right arrow keys, but im trying to implement up and down key presses aswell but adding .prev(-3) doesnt seems to work, so I was just wondering if its possible to do that?
I have setup a test of what im doing here
$(document).keydown(
function(e)
{
if (e.keyCode == 39) {
$("button:focus").next().focus();
}
if (e.keyCode == 37) {
$("button:focus").prev().focus();
}
if (e.keyCode == 40) {
$("button:focus").next(+3).focus();
}
if (e.keyCode == 38) {
$("button:focus").prev(-3).focus();
}
}
);
Working fiddle.
I would use nextAll and prevAll in combination with eq:
$("button:focus")
.nextAll() // get all following siblings
.eq(2); // get third from the set (zero based)
$("button:focus")
.prevAll() // get all previous siblings
.eq(2); // get third from the set (zero based)
Prev(number) is not supported by jquery but you can call it multiple times, see below code
$(document).keydown(
function(e)
{
if (e.keyCode == 39) {
$("button:focus").next().focus();
}
if (e.keyCode == 37) {
$("button:focus").prev().focus();
}
if (e.keyCode == 40) {
$("button:focus").next().next().next().focus();
}
if (e.keyCode == 38) {
$("button:focus").prev().prev().prev().focus();
}
}
);
working Code
i used to do like this but i changed to this Fiddle
I prefer to use tabindex
i count my buttons, input, select
i add to them tabindex by each
last i focus it by its index
let el=$('button');
for(var i = 1; i<=el.length; i++){
el.eq(i-1).attr('tabindex',i);
}
$('button').unbind().on('keydown', function(event) {
let currentTabIndex = $(this).attr('tabindex');
let el = $('button');
switch (event.which) {
case 38:
currentTabIndex = parseInt(currentTabIndex) - 1;
if (currentTabIndex == 0) {
$("[tabindex=" + el.length + "]").focus()
} else {
$("[tabindex=" + currentTabIndex + "]").focus()
}
break;
case 13:
case 40:
currentTabIndex = parseInt(currentTabIndex) + 1;
if (currentTabIndex == el.length+1) {
$("[tabindex=" + 1 + "]").focus()
} else {
$("[tabindex=" + currentTabIndex + "]").focus()
}
break;
}
});
button:focus{
border:1px solid red;
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
all you need is select your buttons good on selecter
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
I need help figuring out how to get the loop to work properly with onKeydown. Right now, I'm having issues where if you press the key once, it outputs 10 message in one go.
var i = 0;
do {
if (document.onkeydown = keyPress) {
i += 1;
console.log(i);
}
} while (i < 5);
function keyPress(m) {
if (m.keyCode == '38') {
i
document.write("you moved North" + "<br>");
//up arrow
} else if (m.keyCode == '40') {
document.write("you moved South" + "<br>");
//down arrow
} else if (m.keyCode == '37') {
document.write("you moved West" + "<br>");
//left arrow
} else if (m.keyCode == '39') {
document.write("you moved East" + "<br>");
//right arrow
}
}
Not sure if this is your problem, but given your code, document.onkeydown is always going to equal keyPress. Switch:
if (document.onkeydown = keyPress) {
...
}
To:
if (document.onkeydown == keyPress) {
...
}
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