Question

您好，我有以下代码：

＆＃13;

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.isShown = false;

  $scope.togglePopup = function() {
    $scope.isShown = !$scope.isShown;
  }
});

＆＃13;

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: grey;
}
.inputAddon {
  display: flex;
  flex-direction: row;
}
input {
  width: 75px;
  height: 19px;
}
.addon {
  width: 25px;
  height: 25px;
  background-color: green;
}
.popup {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background-color: white;
  position: absolute;
  z-index: 1000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController" class="wrapper">
  <div class="inputAddon">
    <input type="number">
    <div class="addon" ng-click="togglePopup()"></div>
  </div>
  <div class="popup" ng-if="isShown"></div>
</div>

＆＃13;

在那里，您可以看到右侧有一个带有插件按钮的输入，这会打开类似弹出窗口的内容，其中包含更多操作。现在应该这样工作：

桌面：点击输入字段=焦点输入字段，然后使用键盘输入值。单击addon-button（绿色）=打开弹出窗口。
平板电脑：隐藏了按钮（绿色）。点击输入=不打开浏览器的服装键盘（例如，来自ipad的safari中的虚拟键盘）。它会像桌面上的插件按钮（绿色按钮）一样打开弹出窗口。

所以我需要一种方法来检测，如果有平板电脑或桌面。当它是平板电脑时，我必须将属性readonly="true"添加到输入中。这不会打开平板电脑上的服装键盘。当我点击输入时，还需要隐藏插件按钮并打开弹出窗口。在桌面上它应该像在代码片段中一样工作。

我知道如何添加/删除readonly以及如何使用Jquery，Javascrpt等隐藏/显示adddon-button但是最好的方法是检测平板电脑或桌面？我在$.browse找到了一些问题，但是我读到了，它不再支持sinse Jquery 1.9.1？或者还有一种方法可以用角度来做到这一点吗？

关于此的任何想法/信息？

感谢。

Answer 1

您可以使用UAParser.js：https://faisalman.github.io/ua-parser-js/

var parser = new UAParser();
var result = parser.getResult();
//Possible 'device.type':
//console, mobile, tablet, smarttv, wearable, embedded
console.log(result.device.type);

更多文档信息：https://github.com/faisalman/ua-parser-js

检查它是平板电脑还是台式机

1 个答案: