如何在使用javascript按下shift键时显示大写字母？

Question

我正在开发一个项目，需要在带有小写字母和大写字母的弹出窗口上显示键盘。 我完成了小写字母但是当我按下shift键时，所有字母都应该变成大写字母。 在这个例子中，我需要在单击Shift按钮时将字母z，x，c，v，b显示为大写字母。 我该如何实现这一目标？ 提前致谢。 这是我到目前为止编写的代码：

  $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

你必须运行一个循环，因为document.getElementsByClassName('Val-bt')返回一个数组，你可以直接将css设置为它的元素。

 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> 

编辑：

如果你想大写innetHTML / innerText那么使用：

 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

让我们避免直接操作DOM并使用更多的Angular代替..我们可以在控制器中切换isShift状态，表示键是大写/小写。

这是一个演示

控制器：

$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
}

视图：

<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

在父元素上创建一个指令，该指令将事件侦听器附加到shift键。

您也可以使用您更新的双向绑定传递范围变量。

只要按下shift键，这将运行代码。 有很多例子。

你想要做的是更改范围变量，例如

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

该按键变量应该在带有ng-class的模板上，例如：

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

然后在你的CSS中：

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

编辑

看到你想在按下按钮时改变它，就这样做

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

确保已定义$ scope.keypress。 上面的所有内容形成指令位仍然适用。

Answer 4

另一种方法，用切换：

 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>