Гость
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Как редактировать ячейки в таблице, ограничив значения? / 16 сообщений из 16, страница 1 из 1
23.07.2019, 13:37
    #39840469
Ролг Хупин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Хотелось бы для bool, numeric разрешить юзеру вводить только допустимые значения.

Сделал так

<tr>
<td>Overwrite</td>
<td id="tv2_overwrite" contenteditable='true'>@cfg.Overwrite</td>
</tr>
<tr>
<td>Timeout</td>
<td id="tv2_timeout" contenteditable='true'>@cfg.Timeout</td>
</tr>

Но юзер может ввести любые значения, как ограничить допустимыми значениями поля с числами и бул?

Я так понимаю: для бул можно сделать дропдаун с двумя значениями, а как с числами?
...
Рейтинг: 0 / 0
23.07.2019, 13:46
    #39840477
vb_sub
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Ролг Хупин,

Код: html
1.
<input type="number">
...
Рейтинг: 0 / 0
23.07.2019, 14:15
    #39840492
Ролг Хупин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
vb_subРолг Хупин,

Код: html
1.
<input type="number">



ясно, т.е прицепить в <td> элемент input
...
Рейтинг: 0 / 0
23.07.2019, 14:24
    #39840495
Ролг Хупин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Ролг Хупинvb_subРолг Хупин,

Код: html
1.
<input type="number">



ясно, т.е прицепить в <td> элемент input

сделал так
Код: javascript
1.
2.
3.
4.
5.
6.
<tr>
      <td>Connection Timeout</td>
         <td id="tv2_connectionTimeout">
            <input type="number" min="0" max="60" id="tv22_connectionTimeout" value="@cfg.ConnectionTimeout"/>
        </td>
</tr>



если ввожу 1000, пропускает, только тултип при наезде мышкой пишет, что значение должно быть макс 60.
Как бы сделать, чтобы не выпускать юзера из поля при неправильном вводе значения?
...
Рейтинг: 0 / 0
23.07.2019, 14:24
    #39840496
Ролг Хупин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
или исправлять в максимум, если больше или минимум, если меньше
...
Рейтинг: 0 / 0
23.07.2019, 14:36
    #39840502
vb_sub
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Ролг Хупин,
нужно скриптовать событие изменения Input и соответственно обрабатывать. Но это плохая практика, нужно чтобы при submit формы, пользователю были показаны список ошибок, из-за которых модель не прошла валидацию.
...
Рейтинг: 0 / 0
23.07.2019, 14:50
    #39840513
Ролг Хупин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
vb_subРолг Хупин,
нужно скриптовать событие изменения Input и соответственно обрабатывать. Но это плохая практика, нужно чтобы при submit формы, пользователю были показаны список ошибок, из-за которых модель не прошла валидацию.

согласен, кроме того,

1. если буду исправлять в функции onchange() - по идее она должна быть снова вызвана - рекурсия или такое в асп.нет не бывает?
2. тогда может быть - взять допустимые мин и макс для данного поля и другим цветом красить неправильные значения - как такое сделать?
...
Рейтинг: 0 / 0
23.07.2019, 15:01
    #39840527
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
...
Рейтинг: 0 / 0
23.07.2019, 15:08
    #39840533
Ролг Хупин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
skyANAРолг Хупин,

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Validation

спасибо!

попробовал прицепить функцию и в ней поменять цвет, если значение меньше минимума или больше максиума для данного поля
<td id="tv2_connectionTimeout">
<input type="number" min="0" max="60" onchange="onTimeoutChange(this);" id="tv22_connectionTimeout" value="@cfg.ConnectionTimeout"/>
</td>

<script type="text/javascript">
function onTimeoutChange(t) {
alert("onTimeoutChange:" + t + "; " + t.val + ";" + t.valMin + ";" + t.valMax);

if (t.val < t.valMin || t.val > t.valMax)
alert("onTimeoutChange: incorret value");
}
</script>

алерт показывает все значения, кроме первого - андефайнед.

Как добраться до значений?
...
Рейтинг: 0 / 0
23.07.2019, 15:10
    #39840535
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Ролг ХупинskyANAРолг Хупин,

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Validation

спасибо!

попробовал прицепить функцию и в ней поменять цвет
вы документацию-то почитайте, на фиг функция, чтобы менять цвет?
...
Рейтинг: 0 / 0
23.07.2019, 15:17
    #39840543
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Ролг Хупин,

например:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!doctype html>
<html>
<head>
  <style>
    input:invalid+span:after {
      color: red;
      content: 'incorret value';
    }
  </style>
</head>
<body>
  <input placeholder="0 - 60" type="number" min="0" max="60">
  <span class="validity"></span>
</body>
</html>
...
Рейтинг: 0 / 0
23.07.2019, 15:28
    #39840552
Ролг Хупин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
skyANAРолг Хупин,

например:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!doctype html>
<html>
<head>
  <style>
    input:invalid+span:after {
      color: red;
      content: 'incorret value';
    }
  </style>
</head>
<body>
  <input placeholder="0 - 60" type="number" min="0" max="60">
  <span class="validity"></span>
</body>
</html>




спасибо!

Но, вот, для себя хотелось бы понять, почему здесь текущее значение берется правильно, а не берутся мин и макс значения?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
    function onTimeoutChange(t) {
        var x = document.getElementById(t.id);
        var curVal = $(t).val();
        var minVal = $(t).minVal();//<------------------?
        var maxVal = $(t).maxVal();//<------------------?
        alert("onTimeoutChange:" + t + "; curVal=" + curVal + "; minVal=" + minVal + "; maxVal=" + maxVal + "; ");
        if (curVal < minVal || curVal > maxVal) {
            x.style.color = "red";
        }
    }
...
Рейтинг: 0 / 0
23.07.2019, 15:36
    #39840561
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Ролг Хупин,

так в jQuery нет функций minVal и maxVal
...
Рейтинг: 0 / 0
23.07.2019, 15:38
    #39840565
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Ролг Хупин,

мой вам совет: читайте документацию, а не методом тыка подбирайте свойства и методы
...
Рейтинг: 0 / 0
23.07.2019, 15:51
    #39840579
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
Ролг Хупин<td id="tv2_connectionTimeout">
<input type="number" min="0" max="60" onchange="onTimeoutChange(this);" id="tv22_connectionTimeout" value="@cfg.ConnectionTimeout"/>
</td>

<script type="text/javascript">
function onTimeoutChange(t) {
alert("onTimeoutChange:" + t + "; " + t.val + ";" + t.valMin + ";" + t.valMax);

if (t.val < t.valMin || t.val > t.valMax)
alert("onTimeoutChange: incorret value");
}
</script>

алерт показывает все значения, кроме первого - андефайнед.
И правильно показывает, потому как у HTMLInputElement не определены свойства val, valMin и valMax.

А определены свойства value, min и max:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!doctype html>
<html>
<head></head>
<body>
	<input type="number" min="0" max="60" onchange="onTimeoutChange(this)">
  <script type="text/javascript">
    function onTimeoutChange(sender) {
      var max = +sender.max,
          min = +sender.min,
          val = +sender.value;

      if (val < min || val > max)
        alert("onTimeoutChange: incorret value");
    }
</script>
</body>
</html>
...
Рейтинг: 0 / 0
23.07.2019, 16:00
    #39840592
Ролг Хупин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как редактировать ячейки в таблице, ограничив значения?
skyANAРолг Хупин,

мой вам совет: читайте документацию, а не методом тыка подбирайте свойства и методы

вы правы, дая и пытаюсь не методом тыка, студия сбивает с толку подсказками

Кстати, так работает
Код: javascript
1.
2.
        var minVal = document.getElementById(t.id).min;
        var maxVal = document.getElementById(t.id).max;



но воспользовался вашим методом.
...
Рейтинг: 0 / 0
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Как редактировать ячейки в таблице, ограничив значения? / 16 сообщений из 16, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]