Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.10.2018, 00:38
Аспирант
Отправить личное сообщение для brp80000 Посмотреть профиль Найти все сообщения от brp80000
 
Регистрация: 27.10.2018
Сообщений: 40

Поле для ввода 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}

Последний раз редактировалось brp80000, 30.10.2018 в 01:03.
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2018, 06:50
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2018, 08:37
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

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, 30.10.2018 в 08:40.
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2018, 10:49
Аспирант
Отправить личное сообщение для brp80000 Посмотреть профиль Найти все сообщения от brp80000
 
Регистрация: 27.10.2018
Сообщений: 40

SuperZen,
Спасибо отлично работает. Огромное спасибо
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2018, 06:23
Аспирант
Отправить личное сообщение для brp80000 Посмотреть профиль Найти все сообщения от brp80000
 
Регистрация: 27.10.2018
Сообщений: 40

SuperZen,
а можно как то до внедрить сюда ограничение по количеству вводимых символов для ввода Std {1,3} а при Ext {3,8}
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2018, 12:39
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

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>
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2018, 17:17
Аспирант
Отправить личное сообщение для brp80000 Посмотреть профиль Найти все сообщения от brp80000
 
Регистрация: 27.10.2018
Сообщений: 40

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, 01.11.2018 в 17:42.
Ответить с цитированием
  #8 (permalink)  
Старый 01.11.2018, 17:26
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

brp80000,
Ext 3-5 символа 800-7FFFF
Что то никак не работает ... где ошибка?

если для этого случая вводить 00044 то условие 800 не сработает, а так кто вводит что-то должен понимать )
Ответить с цитированием
  #9 (permalink)  
Старый 01.11.2018, 17:39
Аспирант
Отправить личное сообщение для brp80000 Посмотреть профиль Найти все сообщения от brp80000
 
Регистрация: 27.10.2018
Сообщений: 40

Да вообще что то код не работает, то ли со стилями ошибка?
Ответить с цитированием
  #10 (permalink)  
Старый 01.11.2018, 18:24
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

у меня в коде не смотрю на паттерн и размер
<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>

Последний раз редактировалось SuperZen, 01.11.2018 в 18:31.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать поле input доступным для ввода? mikefromru Events/DOM/Window 4 05.03.2017 09:54
Поле для ввода телефона. При потери фокуса поля, маска прячется DDim1000 Общие вопросы Javascript 1 23.11.2016 20:02
Поле для тестового ввода с кнопкой input mort_ Общие вопросы Javascript 3 25.03.2015 14:24
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
второе поле для ввода даты из календаря maxvilo Элементы интерфейса 4 10.08.2011 21:06