Нужна помощь с одним скриптом на JQuery... - JavaScript, Ajax

artiom4356 · 25.03.2015, 16:49

Пытаюсь стилизировать стрелки input number на jquery. К сожалению у них нету фокуса и при атрибуте disabled они работают, кто ни будь может помочь??

Код HTML:

<html>
	<head>
		<title>number</title>

		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<link rel="stylesheet" href="style.css" />

		<script src="js/jquery.js"></script>
	</head>
	<body>
		<div class="grid">
			<div class="row gap_10">
				<div class="col_6">
					<label>
						Число
						<input type="number" name="user-email" placeholder="Число" />
					</label>
					<label>
						Число
						<input type="number" name="user-email" placeholder="Число" disabled />
					</label>
				</div>
			</div>
		</div>
		<script>
			$(document).ready(function(){
				var num=1;
				$('input[type=number]').each(function(){
					$('<div class="input-number number-'+num+'"></div>').insertBefore(this);
					$(this).appendTo($('.number-'+num));
					num++;			
				});
				
				$('<div class="number-next"></div>').insertAfter('input[type=number]');
				$('<div class="number-prev"></div>').insertBefore('input[type=number]');

				$('.number-prev').click(function(){
					$(this).next('input[type=number]').focus('input[type=number]');
					var g = $(this).next('input[type=number]').val();
					if(g == '') g = 0;
					g--;
					$(this).next('input[type=number]').val(g);
				});
				
				$('.number-next').click(function(){
					var i = $(this).prev('input[type=number]').val();
					if(i == '')i = 0;
					i++;
					$(this).prev('input[type=number]').val(i);
				});
			});
		</script>
	</body>
</html>

Вот файл стилей

Код:

body{margin:20px;}
label{position:relative;width:300px;}
input[type=number]{
	width:220px;
	font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
	font-size: 0.9375em;
	outline:none;
	padding:10px 15px;
	border:0;
	border:2px solid #95A5A6;
	color:#95A5A6;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
input[type=number]:focus{
	color:#171F28;
	border-color:#171F28;
}
input[type=number][disabled]{
	color:#D1D5D6;
	border-color:#D1D5D6;
	background:transparent;
}
input[type=number]{padding:10px 40px;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0px;
	-moz-appearance:textfield;
}
.input-number{position:relative;width:300px;}
.number-prev{
	display:block;
	border:10px solid transparent;
	border-right-color:#95A5A6;
	cursor:pointer;
	position:absolute;
	left:5px;
	top:calc(50% - 10px);
}
.number-next{
	display:block;
	border:10px solid transparent;
	border-left-color:#95A5A6;
	cursor:pointer;
	position:absolute;
	right:5px;
	top:calc(50% - 10px);
}
.number-prev.focus{border-right-color:#171F28;}
.number-next.focus{border-left-color:#171F28;}

Alex11223 · 25.03.2015, 17:43

Java это совсем не JavaScript.

Serge_Bliznykov · 25.03.2015, 21:29

Цитата:

Сообщение от Alex11223

Java это совсем не JavaScript.

согласен, точнее JavaScript это СОВСЕМ не Java!

поэтому перенёс тему в другой раздел...

Fenex · 25.03.2015, 23:39

Так проверяйте в функциях наличие этого аттрибута у поля ввода. Если он есть - то не выполняйте инкремент.

25.03.2015, 17:43	#2
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Java это совсем не JavaScript. Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

25.03.2015, 23:39	#4
Fenex Форумчанин Регистрация: 15.02.2012 Сообщений: 821	Так проверяйте в функциях наличие этого аттрибута у поля ввода. Если он есть - то не выполняйте инкремент. ^-.-^ My GitHub

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Нужна помощь с jQuery ListMenu — не работает русский язык	neewy	JavaScript, Ajax	0	08.11.2014 16:09
Нужна помощь по jQuery	VIP2020	JavaScript, Ajax	4	15.04.2014 15:58
Нужна помощь по jQuery	VIP2020	JavaScript, Ajax	1	31.03.2014 23:51
Проблема с js скриптом jquery	EkaterinaZ	Фриланс	0	25.07.2013 14:09
Нужна помощь с таб-скриптом	Беляевский	JavaScript, Ajax	2	13.09.2009 11:28