Можете ли вы сделать: после стилизации зависимым от значения элемента?
Вы можете использовать этот код для отправки формы без обновления страницы. Я сделал это в своем проекте.
$(function () {
$('#myFormName').on('submit',function (e) {
$.ajax({
type: 'post',
url: 'myPageName.php',
data: $('#myFormName').serialize(),
success: function () {
alert("Email has been sent!");
}
});
e.preventDefault();
});
});
2 ответа
Я хотел бы отказаться от свойства css: after и написать что-то вроде этого:
<div class="formatter">
<input type="number" ng-model="$ctrl.number">0.00</input>
<span ng-if="$ctrl.number <= 100" class="pretty_percentage">%</span>
</div>
Затем настроить pretty_percentage CSS.
Прежде всего, ваша разметка недействительна: <input> является тегом void .
Возможно, вы захотите использовать атрибут-заполнитель :
<input placeholder="0.00%">
Что касается маскировки, это не так просто, как может показаться. Вы можете написать свои собственные директивы, но вам нужно учесть следующее:
- ваш ввод должен быть
type="text"вместоnumber, если вы хотите отображать не цифры (и числа, связанные с цифрами) в нем - , когда вы обновляете значение ввода, вам нужно подключиться к привязке angular
ng-model, или использовать пользовательский$filter, или наблюдатель, чтобы обновить значение в следующем цикл дайджеста
Или вы можете просто использовать пакет angular-input-mask , который был разработан для маскировки входов в angular.js:
<input type="text"
placeholder="0.00%"
ng-model="number"
ui-percentage-mask="2"
ui-percentage-value
ui-hide-space
>
[ 1129] Рабочий пример:
var app = angular.module('app', ['ui.utils.masks']);
app.controller('testController', ['$scope', function($scope) {
$scope.number = 100;
}])<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-input-masks/4.2.1/angular-input-masks-standalone.min.js"></script>
<div ng-app="app" ng-controller="testController">
<input type="text"
placeholder="0.00%"
ng-model="number"
ui-percentage-mask="2"
ui-percentage-value
ui-hide-space
>
</div> Недостатком является то, что при вводе 20, потому что вы хотите 2 десятичные дроби, вам нужно будет ввести 2000, но это интуитивно понятно.
Кроме того, вы можете комбинировать его с вводом диапазона, чтобы обеспечить более удобный UX. Я также немного поиграл со слушателями, чтобы придать ему ощущение type="number", но вы можете полностью отказаться от него:
app = angular.module('app', ['ui.utils.masks']);
/*
* You don't really need any of the controller code below.
* I just fooled around binding keydown events to experiment making
* the input[type="text"] feel more like [type="number"].
* If you don't want it, simply use...
app.controller('testController', () => [])
* ... or delete it altogether and remove `ng-controller`
* attribute from [ng-app] element.
*/
app.controller('testController', ['$scope', '$element', '$timeout', function($s, $e, $t) {
this.$onInit = function() {
// binding $scope.number changes on up/down/pageUp/pageDb
$e.on('keydown', 'input', (e) => {
if ([38, 40, 33, 34].includes(e.keyCode)) {
e.preventDefault();
e.stopImmediatePropagation();
if ([38, 40].includes(e.keyCode))
$s.number += e.keyCode === 38 ? .1 : -.1;
else
$s.number += e.keyCode === 33 ? 1 : -1;
$t(() => $s.$apply());
return false;
}
})
};
}]);input-wrapper {
position: relative;
}
input-wrapper [type="text"]{
font-size: 2rem;
}
input-wrapper [type="range"] {
position: absolute;
top: calc(100% - .5rem);
left: -2px;
width: 100%;
opacity: 0;
padding: 1rem 0;
transition: opacity .25s cubic-bezier(.5, 0, .3, 1);
}
input-wrapper:hover [type="range"],
input-wrapper input:focus~[type="range"],
input-wrapper input:active~[type="range"],
input-wrapper [type="range"]:focus,
input-wrapper [type="range"]:active {
opacity: 1;
}
input-wrapper [type="text"] {
position: relative;
z-index: 1;
}
p {
padding-top: 1rem;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-input-masks/4.2.1/angular-input-masks-standalone.min.js"></script>
<div ng-app="app" ng-controller="testController">
<input-wrapper>
<input type="text" placeholder="0.00%" ng-model="number" ui-percentage-mask="2" ui-percentage-value ui-hide-space>
<input type="range" ng-model="number" min="0" max="100" step="0.01">
</input-wrapper>
<p>Use Up/Down/pageUp/pageDn on a focused input
</div>Если вам трудно стилизовать кросс-браузер ползунка диапазона , есть довольно много пакетов, предоставляющих стилизованные ползунки диапазона, некоторые из которых можно настраивать.