Поле для ввода HEX с границами диапазона, динамически меняющимися от выбора <select>

[brp80000]

Ага, вроде заработало

[brp80000]

А как исключить ввод строчных английских символов?
да и исключить все символы кроме допустимых для HEX
почему то pattern="[A-F\d]" не отрабатывает?

[SuperZen]

казалось бы простая задача на словах )...

<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>
  function HEX(s, h) {
    const select = document.getElementById(s)
    const hex = document.getElementById(h)
    function update() {
      !(parseInt(hex.value, 16).toString(16) === hex.value.toLowerCase()) && !!hex.value && (hex.value = hex.oldValue || '')
      var [min, max] = select.options[select.options.selectedIndex].dataset.minMax.split('-')
      var [lmin, lmax] = select.options[select.options.selectedIndex].dataset.lenMinMax.split('-')
      !(hex.value.toString(16).length <= lmax) && (hex.value = hex.oldValue || '')
      parseInt(hex.value, 16) >= parseInt(min, 16) && parseInt(hex.value, 16) <= parseInt(max, 16) ?
        hex.classList.contains('invalid') && hex.classList.remove('invalid')
        :
        !hex.classList.contains('invalid') && hex.classList.add('invalid')
      hex.oldValue = hex.value
    }
    select.addEventListener('change', update)
    hex.addEventListener('input', update)
    update()
  }
  const controller = new HEX('CanFrame_Type', 'Can_ID')
</script>

[brp80000]

Маленькие латинские ABCDEF всё равно воспринимает, но подумав я понял что и так хорошо. СПАСИБО
Кстати тестил на старом айфоне, там скрипт не работает((

подскажите как указать атрибут download через JS

<a id="LastLog1"></a>
<script>
 var LastLog_r = "3";
LastLog1.href = "logs/lam"+(LastLog_r-2)+".log";
LastLog1.textContent = "lam"+(LastLog_r-2)+".log";
//LastLog1.setAttribute('download','download');
</script>

Чтобы по нажатию происходило скачивание

[Malleys]

подскажите как указать атрибут download через JS

там указывается имя файла для сохранения

<a id="lastLog">download</a><script>
lastLog.href = URL.createObjectURL(new Blob(["ваши данные для скачивания"], { type: "text/plain" }));
lastLog.download = "lam.log";
</script>

UPD
Вот ещё вариант поля для ввода HEX с границами диапазона, динамически меняющимися от выбора <select>

<style>
	html { font: 120% monospace }
	select, input { font: inherit }
	.invalid { color: red }
</style>
Есть вот такой select
<select name="CanFrame_Type" id="CanFrame_Type">
	<option value="0-7FF">Std</option>
	<option value="800-FFFFFFFF">Ext</option>
</select>
и поле для ввода НЕХ
<input id="Can_ID" name="Can_ID" class="max1">
<script>
function HEX(...ids) {
	const [select, hex] = ids.map(id => document.getElementById(id));
	function update() {
		const [valid, value] = select.value
			.split("-")
			.map(v => [parseInt(v, 16), v.length])
			.reduce(([min], [max, maxLength]) => {
				const value = hex.value.replace(/[^\da-f]/gi, "").slice(0, maxLength);
				const number = parseInt(value, 16);
				return [
					min <= number && number <= max,
					value
				]
			});
		hex.classList.toggle("invalid", !valid);
		hex.value = value;
	}
	addEventListener("input", ({ target }) => [select, hex].includes(target) && update());
	update();
}
new HEX("CanFrame_Type", "Can_ID");
</script>

UPD2

Тут можно что угодно вводить !"№;sgфф?

они всё-равно красные, но теперь вводятся только 0-9a-fA-F

UPD3

Кстати тестил на старом айфоне, там скрипт не работает((

Вам следует трансформировать код при помощи babeljs.io и подключить сервис полифилов

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

[brp80000]

Как исключить все символы кроме допустимых для HEX. Тут можно что угодно вводить !"№;sgфф?

[brp80000]

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

У меня локальная машина ... можно как то выкачать этот polyfill.min.js

[brp80000]

<a id="LastLog1"></a>
<script>
 var LastLog_r = "3";
LastLog1.href = "logs/lam"+(LastLog_r-2)+".log";
LastLog1.textContent = "lam"+(LastLog_r-2)+".log";
//LastLog1.setAttribute('download','download');
</script>

А в моем варианте нет указателя на скачивание? У меня как бы значение LastLog_r = "3" передается другим скриптом и формируется ссылка типа "logs/lam"+(LastLog_r-2)+".log" = "logs\lam1.log"
файл открывается браузером, но не скачивается

[Malleys]

Конкретно ваш вариант не устанавливает атрибут download(он был закомментирован)

<a id="LastLog1"></a>
<script>
 var LastLog_r = "3";
LastLog1.href = "logs/lam"+(LastLog_r-2)+".log";
LastLog1.textContent = "lam"+(LastLog_r-2)+".log";
LastLog1.setAttribute('download','download');
</script>

[Malleys]

У меня локальная машина ... можно как то выкачать этот polyfill.min.js

Оно возвращает только те полифилы, которые нужны вашему браузеру. Чтобы пример с HEX работал и в старых браузерах, достаточно использовать ту же самую ссылку. Однако, если предполагается отсутствие интернета или другая причина, то можно указать, какие именно новые методы должны быть доступны в старом браузере. Для того примера нужны Array.prototype.includes, Array.prototype.map, Array.prototype.reduce и Element.prototype.classList. Скрипт, который всегда, независимо от браузера, содержит определения этих функции https://cdn.polyfill.io/v2/polyfill.js?features=Array.prototype.map|always,Ar ray.prototype.reduce|always,Element.prototype.clas sList|always,Array.prototype.includes|always