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

2019-07-27 09:32:40 阅读：165 来源： 互联网

我正在开发一个项目,需要在带有小写字母和大写字母的弹出窗口上显示键盘.我完成了小写字母但是当我按下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>

解决方法:

你必须运行一个循环,因为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>

标签：html,javascript,css,angularjs
来源： https://codeday.me/bug/20190727/1552941.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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