Поле для ввода HEX с границами диапазона, динамически меняющимися от выбора <select>
<style>
.max1:invalid { color: red } .max1:valid { color: black;} </style> Есть вот такой select <select name ="CanFrame_Type" id="CanFrame_Type"> <option value="Std">Std</option> <option value="Ext">Ext</option> </select> Далее поле для ввода НЕХ <input id="Can_ID" name="Can_ID" size="5" class="max1" pattern="[A-F\d]{1,5}" /> когда выбрано Std должен быть доступен диапазон 0x0-0x7FF а когда Ext то 0x800-0xFFFFFFFF. Соответственно желательно ещё и менять количество доступных символов для ввода Std {1,3} а при Ext {3,8} |
<style>
.max1:invalid {
color: red }
.max1:valid {
color: black;}</style>
<body>
<select name="CanFrame_Type" id="CanFrame_Type" onchange='document.getElementById("Can_ID").pattern=this.value'>
<option value="[0-7][A-F\d]{2}|[A-F\d]{1,2}">Std</option>
<option value="[8-9A-F][A-F\d]{2}|[A-F\D]{4,8}">Ext</option>
</select>
<input id="Can_ID" name="Can_ID" size="5" class="max1" pattern="[A-F\d]{1,5}" />
</body>
|
javascript вариант,
<style>
.invalid {
color: red
}
</style>
Есть вот такой select
<select name="CanFrame_Type" id="CanFrame_Type">
<option value="Std" data-min-max="0-7FF">Std</option>
<option value="Ext" data-min-max="800-FFFFFFFF">Ext</option>
</select>
Далее поле для ввода НЕХ
<input id="Can_ID" name="Can_ID" size="5" class="max1" />
<script>
const select = document.getElementById('CanFrame_Type')
const input = document.getElementById('Can_ID')
const update = () => {
var [min, max] = select.options[select.options.selectedIndex].dataset.minMax.split('-')
var value = parseInt(input.value, 16)
if (value.toString(16) === input.value.toLowerCase() && value >= parseInt(min, 16) && value <= parseInt(max, 16)) {
input.classList.contains('invalid') && input.classList.remove('invalid')
} else !isNaN(value) && !input.classList.contains('invalid') && input.classList.add('invalid')
}
select.addEventListener('change', update)
input.addEventListener('input', update)
</script>
|
SuperZen,
Спасибо отлично работает. Огромное спасибо |
SuperZen,
а можно как то до внедрить сюда ограничение по количеству вводимых символов для ввода Std {1,3} а при Ext {3,8} |
brp80000, не понятно, как должно вести себя при {3,8}, например, для 0004...
<style>
.invalid {
color: red
}
</style>
Есть вот такой select
<select name="CanFrame_Type" id="CanFrame_Type">
<option value="Std" data-min-max="0-7FF" data-len-min-max="1-3">Std</option>
<option value="Ext" data-min-max="800-FFFFFFFF" data-len-min-max="3-8">Ext</option>
</select>
Далее поле для ввода НЕХ
<input id="Can_ID" name="Can_ID" class="max1" />
<script>
const select = document.getElementById('CanFrame_Type')
const hex = document.getElementById('Can_ID')
const update = (e) => {
var [min, max] = select.options[select.options.selectedIndex].dataset.minMax.split('-')
var [lmin, lmax] = select.options[select.options.selectedIndex].dataset.lenMinMax.split('-')
var lvalid = hex.value.toString(16).length >= lmin && hex.value.toString(16).length <= lmax
if (!lvalid && !hex.value.toString(16).length <= lmax) {
hex.value = hex.value.substr(0, lmax)
}
var value = parseInt(hex.value, 16)
if (value.toString(16) === hex.value.toLowerCase() && value >= parseInt(min, 16) && value <= parseInt(max, 16)) {
hex.classList.contains('invalid') && hex.classList.remove('invalid')
} else !isNaN(value) && !hex.classList.contains('invalid') && hex.classList.add('invalid')
}
select.addEventListener('change', update)
hex.addEventListener('input', update)
</script>
|
Std 1-3 символа 0-7FF
Ext 3-5 символа 800-7FFFF Что то никак не работает ... где ошибка?
<style>
.max1:invalid {
font-weight: Bold;
margin-top: 5px;
margin-bottom: 5px;
color: red }
.max1:valid {
font-weight: Bold;
margin-top: 5px;
margin-bottom: 5px;
color: black;}
</style>
<form>
<div>
<select name ="CanFrame" id="CanFrame">
<option value="Std" data-min-max="0-7FF" data-len-min-max="1-3">Std</option>
<option value="Ext" data-min-max="800-7FFFF" data-len-min-max="3-5">Ext</option>
</select>
<div>
<input id="CanID" name="CanID" class="max1" size="5" pattern="[A-F\d]"/>
</div>
</div>
</form>
<script>
const select = document.getElementById('CanFrame')
const hex = document.getElementById('CanID')
const update = (e) => {
var [min, max] = select.options[select.options.selectedIndex].dataset.minMax.split('-')
var [lmin, lmax] = select.options[select.options.selectedIndex].dataset.lenMinMax.split('-')
var lvalid = hex.value.toString(16).length >= lmin && hex.value.toString(16).length <= lmax
if (!lvalid && !hex.value.toString(16).length <= lmax) {
hex.value = hex.value.substr(0, lmax)
}
var value = parseInt(hex.value, 16)
if (value.toString(16) === hex.value.toLowerCase() && value >= parseInt(min, 16) && value <= parseInt(max, 16)) {
hex.classList.contains('invalid') && hex.classList.remove('invalid')
} else !isNaN(value) && !hex.classList.contains('invalid') && hex.classList.add('invalid')
}
select.addEventListener('change', update)
hex.addEventListener('input', update)
CanID.value = 400;
</script>
|
brp80000,
Ext 3-5 символа 800-7FFFF Что то никак не работает ... где ошибка? если для этого случая вводить 00044 то условие 800 не сработает, а так кто вводит что-то должен понимать ) |
Да вообще что то код не работает, то ли со стилями ошибка?
|
у меня в коде не смотрю на паттерн и размер
<input id="CanID" name="CanID" class="max1" size="5" pattern="[A-F\d]"/> и стили тоже не так назначаются, если инпут не в размере, то обрезается под выбранный размер с правой стороны на максимальную длину, и если строка не входит в пределы, то интупу назначается класс invalid, а в твоем примере значение назначается через псевдо класс :invalid, надо тогда сделать <input id="CanID" name="CanID" class="max1"/> и
<style>
.max1.invalid {
font-weight: Bold;
margin-top: 5px;
margin-bottom: 5px;
color: red
}
.max1 {
font-weight: Bold;
margin-top: 5px;
margin-bottom: 5px;
color: black;
}
</style>
|
| Часовой пояс GMT +3, время: 05:57. |