Нөмірге арналған маска енгізу - пайыз

JQuery арқылы пайызға ие маска енгізуін қалай жасауға болады? Енгізуді үш санға дейін қабылдап, пайдаланушы теруді аяқтаған кезде ( keyup ) сандардан кейін пайызбен белгі қойыңыз ба?

Мен плагиндерді пайдаланбаймын.

Мысал: % 100 немесе 100% немесе % 100 немесе

<input name="number" class="num_percent">
2
Неліктен кіріс өрісінен кейін пайыз белгісін қойып, стығудың бұл бөлігін сақтаңыз?
қосылды автор Pekka 웃, көзі
Мен кіргізу жолының жанында (тұрақты, статикалық) пайыз белгісін қоюды ауыр сөздермен қосуды білдіремін.
қосылды автор Pekka 웃, көзі
Нөмір пайыз дегенді білсеңіз, неге пайыз белгісі қажет? Кіру белгісін пайыз белгісі жоқ және 100-ге бөліңіз.
қосылды автор Jonathan M, көзі
@JimBo, пайдаланушыға пайыз белгісін енгізуді қажет етпейді. Сізге не істеуге тырысқаныңыз туралы айтып беріңізші. Беттің көп бөлігін жіберіңіз.
қосылды автор Jonathan M, көзі
Сіздің ұсынысыңыз қандай?
қосылды автор JimBo, көзі
Мен бұл нөмірді нақты сан деп білу үшін пайдаланушының пайызбен қойылуын қалаймын. Ол қалай?
қосылды автор JimBo, көзі

2 жауаптар

Бұл үшін JavaScript-ды пайдаланбаған дұрыс. Мәтінді енгізуді табу үшін onkeyup пайдалану кезінде пайда болатын мәселелермен қатар, нәтижесінде алынған жолды клиент/сервер сценарийлеріндегі нөмірге талдаудың қиындықтары болады. Егер пайыз белгісі біріктірілген көрінсе, келесідей бірдеңені жасай аласыз:

<div class="percentInput">
    <input type="text" name="number" class="num_percent">
    %
</div>
.percentInput { position:relative; }
.percentInput span { position: absolute; right: 4px; top:2px; }
.num_percent { text-align: right; padding-right: 12px; }

http://jsfiddle.net/BvVq4/

Мен сәл шабуылдап жүрмін, сондықтан сізге кросс-браузердің дұрыс көрінуін көру үшін стильдерді бұрмалау керек болуы мүмкін. Кем дегенде, бұл жалпы идеяны береді.

10
қосылды
Мен іздеймін
қосылды автор Ryan, көзі
О, бұл өте жақсы. Келешектегі жұмыс input шоғырландыратын onclick өңдегішін аралығына қосып, тек енгізу .
қосылды автор Lightness Races in Orbit, көзі
скрипке барынша ұзындық сипаты бар, бірақ мұнда емес ... сондықтан jsfiddle қараңыз.
қосылды автор Tim Joyce, көзі

Мен кіріс нөмірімен тоқтадым, пайыздық шамды жылжытып, кіріс ұзындығына байланысты (сандардың саны) өз орнын өзгертті.

HTML

<input type="number" min="0" max="100" value="100"> //chose 100 only for the sake of the example
% 

CSS

input {
  width: 55px;
  height: 20px;
  font-size:18px;
}
.percentage-char {
  position: absolute;
  left: 32px;//default position - in this case 100
  top: 1px;
  font-size: 18px; 
}
.one-digit { //position of the '%' when input is 0-9
  left: 13px;
}
.two-digits{ //position of the '%' when input is 10-99
  left: 24px;
}

JS

$(":input").change(function() { //listening to changes on input
   if ($(this).val() < 10) { //adding and removing the classes
        $('.percentage-char').removeClass('two-digits');
        $('.percentage-char').addClass('one-digit');
   } else if ($(this).val() > 9 && $(this).val() < 100) {
        $('.percentage-char').addClass('two-digits');
   } else {
        $('.percentage-char').removeClass('one-digit two-digits');
   }
});

Check out this fiddle

0
қосылды