How to show capital letters when shift key is pressed using javascript?

Question

I am working on a project which needs to show keyboard on a popup with small letters and capital letters. I'm done with small letters but when I press shift key all the letters should turn into capital letters. In this example I need to show the letters z,x,c,v,b as capitals when I click on Shift button. How can I acheive this? Thanks in advance. This is the code I have written so far:

  $scope.isShift = false; $scope.shiftPress = function() { $scope.isShift = !$scope.isShift; }; $scope.printKey = function(value) { return $scope.isShift ? $filter('uppercase')(value) : value; }; } $scope.numberclick = function(value){ $scope.printKey(value); } 

 <button class="Val-bt" ng-click="shiftPress()">Shift</button> <button class="Val-bt" ng-click="numberclick('z')">{{ printKey('z') }}</button> <button class="Val-bt" ng-click="numberclick('x')">{{ printKey('x') }}</button> <button class="Val-bt" ng-click="numberclick('c')">{{ printKey('c') }}</button> <button class="Val-bt" ng-click="numberclick('v')">{{ printKey('v') }}</button> <button class="Val-bt" ng-click="numberclick('b')">{{ printKey('b') }}</button> 

Answer 1

You have to run a loop because document.getElementsByClassName('Val-bt') returns an array and you can set css to its element directly.

 function shiftPress() { var buttons = document.getElementsByClassName('Val-bt'); var i=0; var is = buttons[i].style.textTransform; if(is == "capitalize"){ for(i=0; i< buttons.length; i++){ buttons[i].style.textTransform = "lowercase"; } } else{ for(i=0; i< buttons.length; i++){ buttons[i].style.textTransform = "capitalize"; } } } 

 <button class="Val-bt" onclick="shiftPress()">Shift</button> <button class="Val-bt" ng-click="numberclick('z')">z</button> <button class="Val-bt" ng-click="numberclick('x')">x</button> <button class="Val-bt" ng-click="numberclick('c')">c</button> <button class="Val-bt" ng-click="numberclick('v')">v</button> <button class="Val-bt" ng-click="numberclick('b')">b</button> 

EDIT:

If you want to capitalize the innetHTML / innerText then use this:

 function shiftPress() { var buttons = document.getElementsByClassName('Val-bt'); var i=buttons.length-1; var is = buttons[i].innerHTML.charAt(0); console.log(is); var isn = is.toUpperCase() if(is == isn){ for(i=0; i< buttons.length; i++){ var buttonhtml = buttons[i].innerHTML; buttonhtml = buttonhtml.charAt(0).toLowerCase()+buttonhtml.slice(1); buttons[i].innerHTML = buttonhtml; } } else{ for(i=0; i< buttons.length; i++){ var buttonhtml = buttons[i].innerHTML; buttonhtml = buttonhtml.charAt(0).toUpperCase()+buttonhtml.slice(1); buttons[i].innerHTML = buttonhtml; } } } 

 <button class="Val-bt" onclick="shiftPress()">Shift</button> <button class="Val-bt" ng-click="numberclick('z')">z</button> <button class="Val-bt" ng-click="numberclick('x')">x</button> <button class="Val-bt" ng-click="numberclick('c')">c</button> <button class="Val-bt" ng-click="numberclick('v')">v</button> <button class="Val-bt" ng-click="numberclick('b')">b</button> 

Answer 2

Let's avoid manipulating the DOM directly and use a bit more Angular instead.. We can toggle an isShift state in the controller that will denote whether the keys are upper/lower case.

Here's a demo

Controller:

$scope.isShift = false;

$scope.shiftPress = function() {
    $scope.isShift = !$scope.isShift;
};

$scope.printKey = function(input) {
    return $scope.isShift ? $filter('uppercase')(input) : input;
};

$scope.numberclick = function (input)
{
    input = $scope.printKey(input);

    console.log(input); // to check

    // do whatever with input
}

View:

<button class="Val-bt" ng-click="shiftPress()">Shift</button>
<button class="Val-bt" ng-click="numberclick('z')">{{ printKey('z') }}</button>
<button class="Val-bt" ng-click="numberclick('x')">{{ printKey('x') }}</button>
<button class="Val-bt" ng-click="numberclick('c')">{{ printKey('c') }}</button>
<button class="Val-bt" ng-click="numberclick('v')">{{ printKey('v') }}</button>
<button class="Val-bt" ng-click="numberclick('b')">{{ printKey('b') }}</button>

Answer 3

Create a directive on a parent element that attaches an event listener to the shift key.

You can alternatively pass in a scope variable with two way binding which you update.

This will run code whenever you hit the shift key. There are many examples of this.

What you want to do is change a scope variable, something like

$scope.keyPress = {shift: true/false};

That keypress variable should be on the template with an ng-class, for example:

<button ng-class="{capitalise: keyPress.shift}" class="Val-bt" ng-click="numberclick('c')"></button>

then in your css:

button.Val-bt.capitalise {
 text-transform: capitalize;
}

EDIT

Seeing you want to change it on button press, just do

<button class="Val-bt" ng-click="keyPress.capitalise = !!!keyPress.capitalise">Shift</button>

make sure $scope.keypress is already defined. Everything above apart form the directive bit still applies.

Answer 4

Another method, with toggle:

 function shiftPress() { document.body.classList.toggle('with-shift'); } 

 body.with-shift div.keyboard > button { text-transform: capitalize; } 

 <div class="keyboard"> <button class="Val-bt" onclick="shiftPress()">Shift</button> <button class="Val-bt" ng-click="numberclick('z')">z</button> <button class="Val-bt" ng-click="numberclick('x')">x</button> <button class="Val-bt" ng-click="numberclick('c')">c</button> <button class="Val-bt" ng-click="numberclick('v')">v</button> <button class="Val-bt" ng-click="numberclick('b')">b</button> </div>