0

Hi I've got follow code:

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

  $scope.togglePopup = function() {
    $scope.isShown = !$scope.isShown;
  }
});
.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;
}
<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>

There you can see an input with a addon-button on the right side, which is opening something like a popup with more actions in it. Now it should work like this:

  • Desktop: Click in input field = focus in input field and type value with keyboard. Click on addon-button (green one) = opens the popup.
  • Tablet: Addon-button (green one) hidden. Click in input = don't open the costume keyboard of the browser (for example the virtual keyboard in safari from ipad). It opens the popup like the addon-button (green one) on desktop.

So I need a way to detect, if there is a tablet or desktop. When it's a tablet, I had to add the property readonly="true" to the input. This would not open the costume keyboard on a tablet. Also a need to hide the addon-button and open the popup when I click in the input. On the desktop it should work like in the snippet.

I know how to add/remove readonly and how to hide/show adddon-button with Jquery, Javascrpt etc. But what't the best way to detect if it't tablet or desktop? I found some questions with $.browse but I read, that it's not supported anymore sinse Jquery 1.9.1? Or is there also a way to do this with angular?

Any ideas/informations about this?

Thanks.

webta.st.ic
  • 4,781
  • 6
  • 48
  • 98
  • 1
    why not to see this post. http://stackoverflow.com/questions/16520186/how-to-detect-tablet-mobile-desktop-tv-using-javascript – TheKingPinMirza Jul 09 '16 at 06:34
  • 1
    Refer: [Device detection (phone, tablet, desktop, mobile grade, os, versions)](http://hgoebl.github.io/mobile-detect.js/) – palaѕн Jul 09 '16 at 06:36
  • Hi @immirza thanks for the fast answer. Is this plugin free also for commerical web applications? Cheers. – webta.st.ic Jul 09 '16 at 06:37
  • 1
    Yes, You can use it free of charge, as long as your website is publicly available and does not require fees or paid subscription to access. more details https://www.scientiamobile.com/page/wurfl-js-license – TheKingPinMirza Jul 09 '16 at 06:43
  • @immirza I edited the correct marked answer with you're links of you plugins. It should be there, when it's reviewed. Thanks. – webta.st.ic Jul 09 '16 at 06:59
  • @palaѕн see please my comment below. Thanks – webta.st.ic Jul 09 '16 at 06:59

1 Answers1

1

You can use 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);

More documentation info: https://github.com/faisalman/ua-parser-js

Doua Beri
  • 10,612
  • 18
  • 89
  • 138