Merge pull request #4583 from JDonadio/bug/input-mousewheel

Disable mousewheel on numeric input fields
This commit is contained in:
Gustavo Maximiliano Cortez 2016-07-13 12:44:15 -03:00 committed by GitHub
commit 8a0131dff5
10 changed files with 30 additions and 17 deletions

View file

@ -43,12 +43,12 @@
</label>
<div class="input">
<input ng-show="!showAlternative" type="number" id="amount"
<input ng-show="!showAlternative" type="number" id="amount" ignore-mouse-wheel
name="amount" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
ng-minlength="0.00000001" ng-maxlength="10000000000"
ng-model="amount" autocomplete="off" ng-disabled="buy.loading">
<input ng-show="showAlternative" type="number" id="fiat"
<input ng-show="showAlternative" type="number" id="fiat" ignore-mouse-wheel
name="fiat" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
ng-model="fiat" autocomplete="off" ng-disabled="buy.loading">

View file

@ -49,12 +49,12 @@
<label>Amount in {{showAlternative ? 'USD' : 'BTC'}}</label>
<div class="input">
<input ng-show="!showAlternative" type="number" id="qty"
<input ng-show="!showAlternative" type="number" id="qty" ignore-mouse-wheel
name="qty" ng-attr-placeholder="{{'Amount'}}"
ng-minlength="0.00000001" ng-maxlength="10000000000"
ng-model="qty" autocomplete="off" ng-change="buy.getBuyPrice(index.glideraToken, {'qty': qty})">
<input ng-show="showAlternative" type="number" id="fiat"
<input ng-show="showAlternative" type="number" id="fiat" ignore-mouse-wheel
name="fiat" ng-attr-placeholder="{{'Amount'}}"
ng-model="fiat" autocomplete="off" ng-change="buy.getBuyPrice(index.glideraToken, {'fiat': fiat})">
@ -94,7 +94,7 @@
</p>
<form name="buyForm"
ng-submit="buy.sendRequest(index.glideraToken, index.glideraPermissions, twoFaCode)" novalidate>
<input type="number" ng-model="twoFaCode" required>
<input type="number" ng-model="twoFaCode" required ignore-mouse-wheel>
<input class="button black expand round"
ng-style="{'background-color':index.backgroundColor}"
type="submit" value="{{'Buy'}}" ng-disabled="buyForm.$invalid || buy.loading">

View file

@ -87,7 +87,7 @@
<div ng-show="create.seedSourceId == 'trezor' || create.seedSourceId == 'ledger'">
<label class="oh"><span translate>Account Number</span>
<input type="number" id="account" ng-model="account">
<input type="number" id="account" ng-model="account" ignore-mouse-wheel>
</label>
</div>

View file

@ -194,7 +194,7 @@
<div ng-show="seedSourceId == 'trezor' || seedSourceId == 'ledger'">
<label class="oh"><span translate>Account Number</span>
<input type="number" id="account" ng-model="account">
<input type="number" id="account" ng-model="account" ignore-mouse-wheel>
</label>
</div>

View file

@ -73,7 +73,7 @@
<div ng-show="join.seedSourceId == 'trezor' || join.seedSourceId == 'ledger'">
<label class="oh"><span translate>Account Number</span>
<input type="number" id="account" ng-model="account">
<input type="number" id="account" ng-model="account" ignore-mouse-wheel>
</label>
</div>

View file

@ -60,7 +60,7 @@
<span translate>Amount</span>
</label>
<div class="input">
<input type="number" id="amount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{unitName}}"
<input type="number" id="amount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{unitName}}" ignore-mouse-wheel
ng-model="_customAmount" ng-minlength="0.00000001" ng-maxlength="10000000000" valid-amount required autocomplete="off">
<input type="number" id="alternative" name="alternative" ng-model="_customAlternative" style="display:none">
<a class="postfix button" ng-style="{'background-color':color}" ng-click="toggleAlternative()">{{unitName}}</a>
@ -70,7 +70,7 @@
<label for="alternative"><span translate>Amount</span> [{{ alternativeIsoCode }}]
</label>
<div class="input">
<input type="number" id="alternative" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{alternativeName}}"
<input type="number" id="alternative" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{alternativeName}}" ignore-mouse-wheel
ng-model="_customAlternative" required autocomplete="off" required>
<input type="number" id="amount" name="amount" ng-model="_customAmount" style="display:none">
<a class="postfix button black" ng-click="toggleAlternative()"> {{ alternativeIsoCode }}</a>

View file

@ -54,12 +54,12 @@
</span>
</label>
<div class="input">
<input ng-show="!showAlternative" type="number" id="amount"
<input ng-show="!showAlternative" type="number" id="amount" ignore-mouse-wheel
name="amount" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
ng-minlength="0.00000001" ng-maxlength="10000000000"
ng-model="amount" autocomplete="off">
<input ng-show="showAlternative" type="number" id="fiat"
<input ng-show="showAlternative" type="number" id="fiat" ignore-mouse-wheel
name="fiat" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
ng-model="fiat" autocomplete="off">

View file

@ -48,12 +48,12 @@
<label><span>Amount in</span> {{showAlternative ? 'USD' : 'BTC'}}</label>
<div class="input">
<input ng-show="!showAlternative" type="number" id="qty"
<input ng-show="!showAlternative" type="number" id="qty" ignore-mouse-wheel
name="qty" ng-attr-placeholder="{{'Amount'}}"
ng-minlength="0.00000001" ng-maxlength="10000000000"
ng-model="qty" autocomplete="off" ng-change="sell.getSellPrice(index.glideraToken, {'qty': qty})">
<input ng-show="showAlternative" type="number" id="fiat"
<input ng-show="showAlternative" type="number" id="fiat" ignore-mouse-wheel
name="fiat" ng-attr-placeholder="{{'Amount'}}"
ng-model="fiat" autocomplete="off" ng-change="sell.getSellPrice(index.glideraToken, {'fiat': fiat})">
@ -94,7 +94,7 @@
</p>
<form name="sellForm"
ng-submit="sell.createTx(index.glideraToken, index.glideraPermissions, twoFaCode)" novalidate>
<input type="number" ng-model="twoFaCode" required>
<input type="number" ng-model="twoFaCode" required ignore-mouse-wheel>
<input class="button black expand round"
ng-style="{'background-color':index.backgroundColor}"
type="submit" value="{{'Sell'}}" ng-disabled="sellForm.$invalid ">

View file

@ -427,7 +427,7 @@
<span translate>Amount</span>
</label>
<div class="input">
<input type="number" id="amount" ng-disabled=" home.lockAmount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{home.unitName}}" ng-model="_amount" valid-amount required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)">
<input type="number" id="amount" ng-disabled=" home.lockAmount" name="amount" ng-attr-placeholder="{{'Amount in'|translate}} {{home.unitName}}" ng-model="_amount" valid-amount required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)" ignore-mouse-wheel>
<input type="number" id="alternative" name="alternative" ng-model="_alternative" style="display:none">
<a class="postfix button" ng-style="{'background-color':index.backgroundColor}" ng-click="home.showAlternative()">{{home.unitName}}</a>
</div>
@ -436,7 +436,7 @@
<label for="alternative"><span translate>Amount</span> [{{ home.alternativeIsoCode }}]
</label>
<div class="input">
<input type="number" id="alternative" ng-disabled="!home.isRateAvailable || home.lockAmount" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{ home.alternativeName }}" ng-model="_alternative" required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)">
<input type="number" id="alternative" ng-disabled="!home.isRateAvailable || home.lockAmount" name="alternative" ng-attr-placeholder="{{'Amount in'|translate}} {{ home.alternativeName }}" ng-model="_alternative" required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)" ignore-mouse-wheel>
<input type="number" id="amount" name="amount" ng-model="_amount" style="display:none">
<a class="postfix button black" ng-click="home.hideAlternative()"> {{ home.alternativeIsoCode }}</a>
</div>

View file

@ -325,4 +325,17 @@ angular.module('copayApp.directives')
replace: true,
templateUrl: 'views/includes/available-balance.html'
}
})
.directive('ignoreMouseWheel', function($rootScope, $timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('mousewheel', function(event) {
element[0].blur();
$timeout(function() {
element[0].focus();
}, 1);
});
}
}
});