Css'de maksimum uzunluk belirtebilir miyim?

85

Maxlength niteliğini CSS'deki bir şeyle değiştirebilir miyim?

<input type='text' id="phone_extension" maxlength="4" />

html css

— Brian Ramsay
kaynak

69

Hayır. Bunun HTML'de yapılması gerekiyor. Yine de gerekirse Javascript ile değeri ayarlayabilirsiniz.

— Edeverett
kaynak

127

Hayır.

maxlength davranış içindir.

CSS stil vermek içindir.

Bu yüzden.

Ayrıca, CSS herhangi bir etikete global olarak uygulanabilir, bu nedenle bir div veya img vb. İçin maksimum uzunluk özelliğinin uygulanması mantıklı olmaz.

— Dan Diplo

5

Ama ya bir maxlength özelliğini ortak bir girdi türü kümesine (örneğin ad, şehir, eyalet) uygulamak isterseniz ve web sitesi aracılığıyla çeşitli yerlerde bu girdilerin birden çok örneğine sahip olabilirsiniz. Bir sınıf (örneğin, 'Ad') tanımlayabilmek harika olurdu ve bu sınıfı tüm Ad Girişlerine uygularlar <Giriş sınıfı = "Ad">

— Catchops

@Catchops Bu bir HTML sınırlamasıdır ve bu sorunu çözmek için CSS kullanmak çirkin bir hack olur. Bu nedenle çoğu web çerçevesi, özel bileşenlere sahip bir şablon sistemi sağlar.

— Gabriel

12

JQuery'yi şu şekilde kullanabilirsiniz:

$("input").attr("maxlength", 4)

İşte bir demo: http://jsfiddle.net/TmsXG/13/

— macio.Jun
kaynak

6

Yapabileceğinizi sanmıyorum ve CSS'nin sayfanın nasıl göründüğünü tanımlaması gerekiyor, bu yüzden yapabilseniz bile, gerçekten nasıl kullanmanız gerektiği değil.

Belki de form bileşenlerinize ortak işlevsellik uygulamak için JQuery kullanmayı düşünmelisiniz?

— Charlie
kaynak

4

CSS ile değil, hayır.

— JMP
kaynak

3

CSS ile değil, ancak JavaScript ile istenen davranışı taklit edebilir ve genişletebilir / özelleştirebilirsiniz.

— code_burgar
kaynak

2

Diğerlerinin de yanıtladığı gibi, maksimum uzunluğu doğrudan bir CSS sınıfına eklemenin geçerli bir yolu yoktur.

Ancak bu yaratıcı çözüm, aradığınız şeyi başarabilir.

Sitede başvurduğum maxLengths.js adlı bir dosyada jQuery var (ASP için site.master)

iş başında görmek için pasajı çalıştırın, iyi çalışıyor.

jquery, css, html:

$(function () {
    $(".maxLenAddress1").keypress(function (event) {

        if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
            return false;
        } else {
            return true;
        }

    });
});

.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" class="maxLenAddress1" />

Snippet'i genişlet

Bunu kullanmanın avantajı: Bu tür bir alan için maksimum uzunluğun tüm uygulamanızda dışarı veya içeri itilmesi gerektiğine karar verilirse, bunu tek bir noktada değiştirebilirsiniz. Müşteri kodları, tam ad alanları, e-posta alanları ve uygulamanızda ortak olan herhangi bir alan gibi alan uzunlukları için kullanışlıdır.

— Taylor Brown
kaynak

1

Bu kodun birden çok alan türü için kopyalanması ve yapıştırılması çok kolaydır. "MaxLengths.js" adında ayrı bir jQuery dosyası tutuyorum ve bunu site yöneticime ekliyorum. Deneyin, çok uygun!

— Taylor Brown

Sırf HTML sınıfı kullandığınız için CSS değil.

— nyuszika7h

@ nyuszika7h Cevabıma çok değer verdiğiniz katkılarınız için teşekkürler. Öğeye herhangi bir stil uygulamazken, çözümümde hala basamaklı bir stil sayfası kullanıyorum, bu nedenle CSS kullanılıyor. Ek olarak, gözleminizi yansıtmak için cevabımı güncelledim.

— Taylor Brown

1

Kullanım $("input").attr("maxlength", 4) sen jQuery sürümü <1.6 kullanıyorum ve eğer $("input").prop("maxLength", 4) sen jQuery sürümünü kullanıyorsanız 1.6+.

— Rohit
kaynak