0

Здравствуйте! Необходимо сверстать форму следующего вида:

введите сюда описание изображения

С html/css все понятно, вопросы возникают при попытке сделать так, чтобы значение первого поля не могло превышать значения второго (и наоборот - значение второго поля не было меньше первого). Плюс, буду очень благодарен, если подскажете, как при вводе значения сразу добавлять символ $ перед значением. Песочница.

.from-to-form label {
    font-weight: normal;
    margin-right: 10px;
}
.from-to-form label:last-of-type {
    margin-left: 10px;
}
.from-to-form input[type="number"] {
    width: 83px;
    height: 24px;
    border-radius: 4px;
    box-shadow: none;

    border: 2px solid #aaa;
    font-size: 14px;
    text-align: center;
    color: #333;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.from-to-form input[type="number"]:hover {
    border: 2px solid #ffe69a;
}
.from-to-form input[type="number"]:focus {
    border: 2px solid #ffe69a;
    background-color: #fef5d3;
    outline: none;
}
.from-to-form input[type="number"]::-webkit-outer-spin-button,
.from-to-form input[type="number"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="from-to-form">
  <label for="price-range-from">From</label>
  <input id="price-range-from" type="number" placeholder="$15">

  <label for="price-range-to">To</label>
  <input id="price-range-to" type="number" placeholder="$232">
</form>

3 ответа 3

2

Есть вот такое решение, с установкой минимального и максимального значения:

var shopFilterMinPrice = 15;
var shopFilterMaxPrice = 232;

$('#price-range-from').on('change', function() {
    var minEl = $(this);
    var maxEl = $('#price-range-to');

    var minElVal = correctPriceFilterMinValue(minEl.val());
    var maxElVal = correctPriceFilterMaxValue(maxEl.val());

    if (minElVal > maxElVal) {
        minElVal = maxElVal;
    }

    minEl.val(minElVal);
    maxEl.val(maxElVal);
});

$('#price-range-to').on('change', function() {
    var minEl = $('#price-range-from');
    var maxEl = $(this);

    var minElVal = correctPriceFilterMinValue(minEl.val());
    var maxElVal = correctPriceFilterMaxValue(maxEl.val());

    if (minEl.val()) {
        if (maxElVal < minElVal) {
            maxElVal = minElVal;
        }
    } else {
        if (maxElVal < shopFilterMinPrice) {
            maxElVal = shopFilterMinPrice;
        }
    }

    minEl.val(minElVal);
    maxEl.val(maxElVal);
});

function correctPriceFilterMinValue(val) {
    var inpMinVal = val;

    if (inpMinVal && /[^0-9]/.test(inpMinVal) == false) {
        inpMinVal = parseInt(inpMinVal);
        if (inpMinVal < shopFilterMinPrice) {
            inpMinVal = shopFilterMinPrice;
        }
    } else {
        inpMinVal = shopFilterMinPrice;
    }

    return inpMinVal;
}

function correctPriceFilterMaxValue(val) {
    var inpMaxVal = val;

    if (inpMaxVal && /[^0-9]/.test(inpMaxVal) == false) {
        inpMaxVal = parseInt(inpMaxVal);
        if (inpMaxVal > shopFilterMaxPrice) {
            inpMaxVal = shopFilterMaxPrice;
        }
    } else {
        inpMaxVal = shopFilterMaxPrice;
    }

    return inpMaxVal;
}
.from-to-form label {
    font-weight: normal;
    margin-right: 10px;
}
.from-to-form label:last-of-type {
    margin-left: 10px;
}
.from-to-form input[type="number"] {
    width: 83px;
    height: 24px;
    border-radius: 4px;
    box-shadow: none;

    border: 2px solid #aaa;
    font-size: 14px;
    text-align: center;
    color: #333;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.from-to-form input[type="number"]:hover {
    border: 2px solid #ffe69a;
}
.from-to-form input[type="number"]:focus {
    border: 2px solid #ffe69a;
    background-color: #fef5d3;
    outline: none;
}
.from-to-form input[type="number"]::-webkit-outer-spin-button,
.from-to-form input[type="number"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="from-to-form">
  <label for="price-range-from">From</label>
  <input id="price-range-from" type="number" placeholder="$15">

  <label for="price-range-to">To</label>
  <input id="price-range-to" type="number" placeholder="$232">
</form>

Что касается знака доллара, то нужно учитывать, что его потребуется убирать при отправке запроса. Более того, если вы будете работать с несколькими валютами, так же потребуются правки. Другими словами, лучше оставляйте чистые значения.

2

Вот результат, "$" символ можно добавить как айкон

.from-to-form label {
    font-weight: normal;
    margin-right: 10px;
}
.from-to-form label:last-of-type {
    margin-left: 10px;
}
.from-to-form input[type="number"] {
    width: 83px;
    height: 24px;
    border-radius: 4px;
    box-shadow: none;

    border: 2px solid #aaa;
    font-size: 14px;
    text-align: center;
    color: #333;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.from-to-form input[type="number"]:hover {
    border: 2px solid #ffe69a;
}
.from-to-form input[type="number"]:focus {
    border: 2px solid #ffe69a;
    background-color: #fef5d3;
    outline: none;
}
.from-to-form input[type="number"]::-webkit-outer-spin-button,
.from-to-form input[type="number"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="from-to-form">
  <label for="price-range-from">From</label>
  <input id="price-range-from" type="number" placeholder="$15">

  <label for="price-range-to">To</label>
  <input id="price-range-to" type="number" placeholder="$232">
</form>

<script type="text/javascript">
$(document).ready(function(){
$("#price-range-from").on("change", function(){
 	if(parseInt($(this).val()) > parseInt($("#price-range-to").val()))
 	{
 		alert("first value can't be larger then second");
 	}
 	console.log($(this).val())
 
 });
$("#price-range-to").on("change", function(){
 	if(parseInt($(this).val()) < parseInt($("#price-range-from").val()))
 	{
 		alert("Second value can't be smaler then first");
 	}
 	console.log($(this).val())
 
 });	
});

</script>

3
  • Не очень корректно работает. Введите 77 и 8. 17 янв 2017 в 9:55
  • сейчас проверю.
    – L. Vadim
    17 янв 2017 в 9:57
  • исправил все работает.
    – L. Vadim
    17 янв 2017 в 10:12
0


min = '15' max = '231' value = "$15" добавь к первому инпуту

type="number" placeholder="$232" min = '232' value = "$232" - ко второму

При типе number, можно ограничить число в HTML. Как вариант)


Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.