Css разряды в цифрах

Разбить число на разряды при вводе в input text

При вводе длинных чисел в текстовое поле становится визуально понятнее и удобнее если числа автоматически бьются на разряды. Сделать такую функцию можно на JS с помощью регулярных выражений и jQuery.

Ввод только чисел (без точки)

Пример:

Ввод суммы с копейками

Второй пример ограничивает ввод в поле числом с двумя знаками после точки (например:
1 000.00 ).

Пример:

Комментарии 2

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают.

Источник

Форматирование чисел (десятичных знаков, разделителей тысяч и т. Д.) С помощью CSS

Можно ли форматировать числа с помощью CSS? То есть: десятичные разряды, десятичный разделитель, разделитель тысяч и т.д.

Вы не можете, но вы действительно должны быть в состоянии. В конце концов, 50 000, 50000 или 50 000,00 — это все те же «данные», они просто представлены по-другому, для чего и нужен CSS.

@MrMisterMan: Есть некоторые идеи, которые здесь можно найти : wiki.csswg.org/ideas/content-formatting#numbers Я, вероятно, буду преследоваться и обвиняться в цитировании «спецификаций» и получении надежд всех. И мне любопытно узнать, как здесь будет обрабатываться нечисловой текст.

Хотя я согласен с тем, что это было бы неплохо, число встроено в локализованную в противном случае страницу. То есть остальная часть страницы — английский, китайский или любой другой язык, и цифры должны соответствовать IMO этой локализации. Почему они должны быть локализованы отдельно от остальной части страницы .

9 ответов

Ну, для любых чисел в Javascript я использую следующий:

var a = "1222333444555666777888999"; a = a.replace(new RegExp("^(\\d)(\\d)", "g"), "$1 $2").replace(/(\d)+?/gi, "$1 ").trim(); 

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

var sep = ","; a = a.replace(/\s/g, sep); 

function numberFormat(_number, _sep) < _number = typeof _number != "undefined" && _number >0 ? _number : ""; _number = _number.replace(new RegExp("^(\\d)(\\d)", "g"), "$1 $2").replace(/(\d)+?/gi, "$1 ").trim(); if(typeof _sep != "undefined" && _sep != " ") < _number = _number.replace(/\s/g, _sep); >return _number; > 

Мне это нравится. Но мне нужно было также преобразовать число в строку перед заменой. Вы не можете сделать замену на номер.

перед вызовом _number.replace мы должны убедиться, что это строка типа _number = typeof _number != «undefined» && _number > 0 ? String(_number) : «»; или иначе вы получите ошибку _number.replace не определен или не является функцией

Рабочая группа CSS опубликовала проект в Форматирование содержимого в 2008 году. Но ничего нового прямо сейчас.

Вероятно, лучший способ сделать это — это комбо для установки диапазона с классом, обозначающим ваше форматирование, а затем использовать JQuery.each для форматирования на пролетах при загрузке DOM.

Нет, вы должны использовать javascript, как только он находится в DOM, или отформатируйте его с помощью серверной части сервера (PHP/ruby ​​/python и т.д.)

Формат чисел является предметом контента, таким как текст контента или другие нотационные проблемы (например, нотации даты, которые зависят от языка). Таким образом, форматирование чисел является локализацией и должно обрабатываться при создании контента. Выполнение этого в JavaScript имеет смысл для той части контента, которая генерируется JavaScript.

Я полностью согласен с этим. Вот почему я написал это в своем ответе. Наверное, следовало бы больше подчеркнуть это.

Это может быть либо контент, либо презентация. Возьмем CSS rtl , который показывает тот же контент по-другому: должен ли он также обрабатываться на стороне сервера?

Не ответ, а интерес. Несколько лет назад я отправил предложение

Я использую функцию PHP number_format() и Узкое No- break Space (   ). Он часто используется как недвусмысленный разделитель тысяч.

echo number_format(200000, 0, "", " "); 

Поскольку у IE8 есть некоторые проблемы с отображением узкого пространства без разрыва, я изменил его для SPAN

echo "".number_format(200000, 0, "", " ").""; 

К сожалению, это на стороне сервера, есть небольшое попадание в процессор, нам нужна возможность редактировать маску html / css. Одевание и рендеринг должны быть на стороне клиента, если мы не обслуживаем PDF?

Я не думаю, что ты можешь. Вы можете использовать number_format(), если вы кодируете в PHP. И другие языки программирования также имеют функцию форматирования чисел.

Вы не можете использовать CSS для этой цели. Я рекомендую использовать JavaScript, если он применим. Взгляните на это для получения дополнительной информации: JavaScript-эквивалент printf/string.format

Также, как сказал Петр, вы можете справиться с этим на стороне сервера, но это полностью зависит от вашего сценария.

Вы можете использовать библиотеку тегов Jstl для форматирования для страниц JSP

JSP Page //import the jstl lib  
Formatted Number (1): " type="currency"/>
 
Formatted Number (2): " />
 
Formatted Number (3): " />
 
Formatted Number (4): " />
 
Formatted Number (5): " />
 
Formatted Number (6): " />
 
Formatted Number (7): " />
 
Formatted Number (8): " />
 

Отформатированный номер (1): £ 120,000.23

Отформатированный номер (2): 000.231

Отформатированный номер (3): 120 000.231

Отформатированный номер (4): 120000.231

Отформатированный номер (5): 023%

Отформатированный номер (6): 12 000 023 0900000000%

Отформатированный номер (7): 023%

Отформатированный номер (8): 120E3

Источник

Разбиение чисел по 3 разряда

Можно ли средствами css разбивать числа по 3 разряда?

Так чтобы из 12345678 получилось 12 345 678.

Ссылка на комментарий

Поделиться на других сайтах

3 ответа на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник

Есть ли способ разбить длинные числа («$ 100000000») на более читаемые триады («$ 100 000 000») с помощью CSS?

У меня есть страница с большим количеством больших значений. Миллионы и миллиарды долларов идут повсюду. И читать эти цифры трудно, поэтому мой клиент просит меня разбить их на более читаемые фрагменты из трех символов: «$ 100000000» = > «$ 100 000 000». Это вполне разумный запрос, но проблема в том, что я не хочу делать это на стороне сервера, и я не хочу делать это с помощью javascript. Видите ли, у меня есть действительно большая куча javascript, уже запущенная на этой странице, выполняя сложные вычисления на этих длинных числах, и будет очень сложно вставить parseReadableStringToInteger() в каждое место, которое считывает данные со страницы и writeIntegerAsReadableString() в любом месте, которое возвращает результаты на страницу. Итак, я думаю об использовании CSS для отображения длинной строки в виде набора коротких фрагментов. Моя первая мысль была -moz-column и -webkit-column , но, к сожалению, они работают только со словами, которые уже разделены пробелом. Может, есть другой способ? Любые предложения приветствуются. p.s. Совместимость между браузерами не требуется. Я в порядке с Gecko и/или Webkit.

Не настолько, насколько я знаю, с помощью CSS (3), плюс не все браузеры смогут просматривать числа так, как вам хотелось бы, если бы это было сделано с помощью CSS3. Почему бы просто не сделать это на стороне сервера? Похоже, безусловно, самый простой ответ на вашу проблему.

Я не думаю, что есть какие-либо способы сделать это — вывод со стороны сервера действительно был бы лучшим.

Мои надежды на некоторую магию CSS3 действительно велики, потому что мои знания о его возможностях невелики. Некоторая причудливая комбинация при переносе слов: break-word; и -moz-column и magic: more-magic ;, кто-нибудь?

Будет ли это проблемой, если он работает только в Firefox 3? Если это так, я думаю, вам нужно прекратить искать решение CSS.

@Peter Питер М: Спасибо за ваш полезный комментарий. Почему я должен беспокоиться о других культурах? Некоторые культуры даже не используют арабские цифры, я должен думать о них тоже?

Источник

Разбивка на разряды input — эстетическое отображение цифр

Разбивка на разряды input — весьма эстетически правильное отображение цифр. Согласитесь, намного приятнее видеть цифру вида 2 600 000, чем 2213777? Вот сегодня мы этим и займемся. Также данную проблематику я решаю в этой статье.

Увы, стандартными средствами html это не сделать, поэтому придется прибегать к магии. Нам потребуется JavaScript, который будет преобразовывать число в input в строку и собственно показывать нам нужный результат. Но в этой статье я бы хотел затронуть еще один важный момент. Допустим, Вы используете поля Вашей формы для какого-то расчета, например, у Вас на сайте есть калькулятор, и вот тут начнутся жуткие проблемы, так как вся информация в input теперь не число, а текст. Причем текст с пробелами, и так просто с ним Вы уже не сможете работать. Поэтому придется сначала переводить все числа в Ваших формулах в исходных вид. Для этого я использовал регулярное выражение, которое показываю также и здесь. Для его использования мы делаем следующее, мы объявляем новую переменную, находим нужный нам input, берем значение этого input, с помощью регулярного выражения удаляем все пробелы и записываем эту строку в нашу переменную. Затем уже стандартным образом переводим строку в число. Внимание! Ниже код.

Разбивка на разряды input — делаем строчку числом

var fullsumm = document.getElementById('fullsumm').value.replace(/\s+/g, ''); fullsumm = fullsumm * 1;

Вот и все. Теперь нашу строку вида 2 600 000, мы переобразовали в число 2600000 и можем с ним осуществлять математические операции. Надеюсь, статья была полезной, все вопросы можете задавать в комментариях.

Источник