如何在使用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>