Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
артист
6 / 8 / 4
Регистрация: 17.09.2014
Сообщений: 946
Завершенные тесты: 1
#1

Input ввод только чисел - JavaScript

08.10.2016, 00:28. Просмотров 489. Ответов 8
Метки нет (Все метки)

Никак не получается сделать поле ввода цифр, чтобы туда никак нельзя было ввести/вставить спецсимволы: e + - , .
А так же чтобы нельзя было ввести число больше 86400 и меньше 1(ни вставить/ни ввести).

Вот, что нагуглил:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript">
            window.onload = function() // Вызывается при полной загрузке страницы
            {
                document.getElementById('tb_delay').oninput = function () // Это чтобы 5 символов было
                {
                    if(this.value.length > 5) this.value = this.value.substr(0, 5)
                }
                document.getElementById('tb_delay').onkeypress = function(e) // Это только цифры
                {
                    e = e || event
 
                    if(e.ctrlKey || e.altKey || e.metaKey) return
 
                    var chr = getChar(e)
 
                    if(chr == null) return
                    if(chr < '0' || chr > '9') return false
                }
            }
        </script>
    </head>
    <body>
        <input type="number" id="tb_delay" size="5" min="1" max="86400" step="60" value="1">
    </body>
</html>
Пробовал ещё в input такое вставлять: pattern="[0-9]{5}" - не работает...
В итоге:
Начинаем вводить символы - ошибка: не известная функция getChar
5 символов перестают работать, когда начинаешь вводить не цифры.

Подскажите пожалуйста, как реализовать задуманное?

П.с. вот там 2 функции, одна при изменении вызывается, вторая при вводе, их же можно объединить?

Добавлено через 20 минут
О, не заметил, там где код брал, там и функция getChar
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getChar(event)
{
    if(event.which == null) // IE
    {
        if(event.keyCode < 32) return null; // спец. символ
        return String.fromCharCode(event.keyCode)
    }
    if(event.which != 0 && event.charCode != 0) // все кроме IE
    {
        if(event.which < 32) return null; // спец. символ
        return String.fromCharCode(event.which); // остальные
    }
    return null; // спец. символ
}
Правда сдаётся мне, она хоть и расписана как универсальная, но работать будет неправильно.

Клавиша Firefox Остальные браузеры
; 59 186
= 107 187
- 109 188
Гугл Хром:
; 186
= 187
- 189
Добавлено через 4 минуты
Не работает, функция то правда работает, а вот символы я вставил при помощи CTRL + V...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.10.2016, 00:28
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Input ввод только чисел (JavaScript):

Ввод в input только цифр и нажатие клавиши backspace - JavaScript
С разрешением ввода цифр проблем не возникло, а вот как разрешить удаление с помощью backspace? onkeypress=&quot;javascript:...

Можно ли запретить ручной ввод в поле <INPUT type=file> ? Выбирать файл только по кнопке? - JavaScript
сабж

Ввод только чисел в prompt - JavaScript
Привет. Пожалуйста, подскажите. Облазила весь google и ничего не смогла найти по своему вопросу. Как сделать так, чтобы в окно prompt можно...

Написание функции (ввод только чисел) - JavaScript
Здраствуйте! Есть вот такая функция: --Печать только цифр htp.p('function onlyNumber(){ pF=event.srcElement; ...

запрет на ввод в input - JavaScript
Есть например 3 input, как сделать запрет на ввод в 2 др если в один уже введена инфа

Input и его свойства [ввод цифр] - JavaScript
Доброго всем вечера. Есть &lt;input&gt; в него нужно вводить только цифры. Как осуществить сей сабж ? В общем этот &lt;input&gt; для ввода...

8
Fedor Vlasenko
Программист Php, Js
809 / 542 / 156
Регистрация: 01.02.2015
Сообщений: 1,664
08.10.2016, 00:30 #2
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
HTML5
1
<input id="myNumber" type="text" value="1"/>
Javascript
1
2
3
4
5
6
7
8
function inputFloat() {
    this.value = this.value.replace(',', '.');
    if (!/^\.?$/.test(this.value) && !isFinite(this.value)) {
        this.value = parseFloat(this.value) || this.value.slice(0, -1);
    }
  (this.value < 1 || this.value > 86400) && (this.value = 1);
}
myNumber.oninput = myNumber.onkeydown = inputFloat;
Песочница
1
артист
6 / 8 / 4
Регистрация: 17.09.2014
Сообщений: 946
Завершенные тесты: 1
08.10.2016, 00:48  [ТС] #3
Ммм, сам подумал тут:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload = function()
{
    load_have_res()
    document.getElementById('tb_delay').oninput = function()
    {
        var s = this.value // Записать в переменную строку из формы
 
        // Если в строке есть символы
        if(s.indexOf(".") != '-1' || s.indexOf(",") != '-1' || s.indexOf("-") != '-1' || s.indexOf("=") != '-1' || s.indexOf("e") != '-1')
        {
            s.replace(/D/g, '') // Удалить из строки всё кроме цифр
            this.value = s // Задать форме результат
        }
        if(s.length > 5) this.value = s.substr(0, 5) // Если длина строки больше 5, обрезать
        
        var num = parseInt(s, 10) // Записать в переменную число из строки(в 10й системе)
 
        if(num < 1) this.value = '1' // Если число меньше 1, задать форме 1
        else if(num > 86400) this.value = '86400' // Если больше, установить максимальное значение
    }
}
Ну и ничего не работает

Добавлено через 2 минуты
О, не обновил страницу, перед тем как написать
Спасибо ))

Правда точку всё равно можно вставить, а когда доходит до 6 символов, вся строка удаляется...

Добавлено через 1 минуту
Ааа...

inputFloat

Сплавающей точкой ж

Всё, дальше сам справлюсь ))
0
Azdeman
Фрилансер
Эксперт HTML/CSSЭксперт PHP
1721 / 1264 / 343
Регистрация: 12.01.2011
Сообщений: 5,016
08.10.2016, 00:48 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
PHP
1
2
3
4
var ints = '86400';
        a = (ints.match(/^(?:[0-8][0-6](?:[0-3][0-9][0-9]|[0-4][0]{2})|[1-9](?:\d{1,3})?)$/)!=null) ? 
             document.write('Всё ок')                                                               : 
             document.write('Число не должно быть больше 86400 и не меньше 1');
1
Fedor Vlasenko
Программист Php, Js
809 / 542 / 156
Регистрация: 01.02.2015
Сообщений: 1,664
08.10.2016, 00:50 #5
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
если только целые числа то можно так
Javascript
1
2
3
4
5
6
7
function inputFloat() {
    if  (!isFinite(this.value)) {
        this.value = parseFloat(this.value) || this.value.slice(0, -1);
    }
  (this.value < 1 || this.value > 86400) && (this.value = 1);
}
myNumber.oninput = myNumber.onkeydown = inputFloat;
песочница

Добавлено через 1 минуту
Цитата Сообщение от артист Посмотреть сообщение
а когда доходит до 6 символов
> 86400
1
артист
6 / 8 / 4
Регистрация: 17.09.2014
Сообщений: 946
Завершенные тесты: 1
08.10.2016, 01:27  [ТС] #6
Странно...
Если type="text", тогда во всплывающем окне выводится всё верно.

Javascript
1
2
3
<input id="myNumber" type="text"/>
function inputFloat(){alert(this.value)}
myNumber.oninput = inputFloat;
А когда type="number", тогда если в форме есть символ, выводится пустое окно...

Javascript
1
2
3
<input id="myNumber" type="number"/>
function inputFloat(){alert(this.value)}
myNumber.oninput = inputFloat;
Добавлено через 11 минут
Я так понимаю и длина тоже некорректная из - за этих символов...
0
артист
6 / 8 / 4
Регистрация: 17.09.2014
Сообщений: 946
Завершенные тесты: 1
22.10.2016, 22:52  [ТС] #7
Как сделать, чтобы автофокус был в конце строки?

На selectionStart ругается, типа нельзя к числовому применять:
Uncaught InvalidStateError: Failed to set the 'selectionStart' property on 'HTMLInputElement': The input element's type ('number') does not support selection.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
    <head>
        <style>
            .form_fade{display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
            .autobuy {width: 133px; height: 50px; display: none; position: absolute; background-color: #e5e5e5; border:2px #ffd800 solid; z-index:2; position: relative; margin: 10% auto;}
            .form_close {width: 20px; height: 20px; display: block; cursor: pointer; background: url(images/close.png); text-indent: -4999px; border-radius: 50px; position: absolute; top: -10px; left: 125px;}
            .form_close:hover{background: url(images/close-hover.png);}
            .form_text {position: absolute; top: -10px; left: 6px;}
            .form_number {position: absolute; top: 22px; left: 6px; width: 80px;}
            .form_button {position: absolute; top: 22px; left: 95px;}
        </style>
        <script type="text/javascript">
            function show_form()
            {
                document.querySelector('div.autobuy').style.display='block'
                document.querySelector('div.form_fade').style.display='block'
                var input = document.querySelector('input.form_number')
                input.focus()
                //input.selectionStart = input.value.length
                alert(input.value.length)
            }
            function hide_form()
            {
                document.querySelector('div.autobuy').style.display='none'
                document.querySelector('div.form_fade').style.display='none'
            }
            function bla()
            {
                alert('Отправилось')
            }
        </script>
    </head>
    <body>
        <br><br><br><br>
        <center><input type="checkbox" id="sale_steel" onclick = "show_form()"></center>
        <div class="autobuy">
            <a class="form_close" title="Закрыть" href="javascript:void(0)" onclick = "hide_form()"></a>
            <pre class="form_text">Сколько закупать:</pre>
            <input class="form_number" type="number" id="tb_delay" min="1" max="9999" value="1">
            <input class="form_button" type="button" value="Ок">
        </div>
        <div class="form_fade"></div>
    </body>
</html>

И ещё, может кто знает как сделать, чтобы стрелочки всегда отображались, а не только при фокусе?
Гуглил, чего - то все хотят их только убрать:

CSS
1
2
3
4
5
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
0
mrtoxas
Модератор
Эксперт HTML/CSS
2424 / 1742 / 971
Регистрация: 12.07.2015
Сообщений: 4,742
Записей в блоге: 3
22.10.2016, 23:44 #8
CSS
1
2
3
4
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
Javascript
1
input.value = input.value
1
артист
6 / 8 / 4
Регистрация: 17.09.2014
Сообщений: 946
Завершенные тесты: 1
23.10.2016, 02:43  [ТС] #9
Спасибо ))
0
23.10.2016, 02:43
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.10.2016, 02:43
Привет! Вот еще темы с ответами:

Как подтвердить ввод в Input элемент - JavaScript
Всем привет помогите разобраться в такой проблеме. На определенном ресурсе есть input элемент с помощью скрипта в вел туда данные но для...

Ввод данных в input через скрипт - JavaScript
&lt;input type=&quot;text&quot; id=&quot;message&quot;&gt; Как скриптом ввести в поле слово?

IE 'помнит' ввод иформации в INPUT, как отключить? - JavaScript
IE 'помнит' ввод иформации в INPUT. т.е. когда юзер начинает вводит что - то в INPUT появляется DROP-DOWN список с введеными ранее...

HMTL сайт ввод данные в input без value - JavaScript
Здравствуйте, javascript понимаю насколько возможно понимать имея опыт написания на C#. Столкнулся с проблемой, на сайт нужно ввести...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru