Düzenlenebilir bir DIV'yi bir metin alanı gibi nasıl görüntüleyebilirim?

82

Bir tane var DIV, contentEditable=trueböylece kullanıcı onu düzenleyebilir. Sorun, bir metin alanına benzememesidir, bu nedenle, kullanıcı tarafından düzenlenebileceği açık olmayabilir.

Kullanıcıya DIVbir metin giriş alanı gibi görünecek şekilde stil verebilmemin bir yolu var mı ?

html css

— akıl sağlığı
kaynak

2

arka plan: beyaz; kenarlık: 1px katı # 666; imleç: metin; ? : P bakınız demomu

— MKK

Sanırım bir textarea? jsfiddle.net/vwPgT

— Jared Farrish

1

@mkk - Örnek bir metin eklerseniz biraz yardımcı olabilir: jsfiddle.net/ZevvE/1

— Jared Farrish

@Jared :) iyi iş! ;-) şimdi onu div ile karıştırmak çok daha zor .. oh bu bir div, unuttum :)

— mkk

@mkk - Şahsen demomun daha net olduğunu düşünüyorum, ama hey, ne olduğu bu.

— Jared Farrish

128

Bunlar Safari, Chrome ve Firefox'taki gerçek benzerleriyle aynı görünüyor. Zarif bir şekilde bozulurlar ve Opera ve IE9'da da iyi görünürler.

Demo: http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS:

textarea {
    height: 28px;
    width: 400px;
}

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

input {
    margin-top: 5px;
    width: 400px;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

HTML:

<textarea>I am a textarea</textarea>
<div id="textarea" contenteditable>I look like textarea</div>

<input value="I am an input" />
<div id="input" contenteditable>I look like an input</div>

Çıktı:

görüntü açıklamasını buraya girin

— ThinkingStiff
kaynak

1

-Webkit-small-control ve medium -moz-fixed tam olarak ne yapar ? Firefox v13.0'da yazı tipini tek aralıklı gösteriyor gibi görünüyorlar

— Hengjie

1

@Hengjie Bunlar, tarayıcıların giriş alanlarını görüntülerken kullandığı varsayılan stillerdir.

— ThinkingStiff

1

İşte bir kullanım alanı, html içeriğini kopyalayıp yapıştırmayı deneyin. Farkı göreceksin.

— Praveen

1

Ayrıca eklenmelidir - background: white;

— Brana

1

Ya bu div içinde düzenlenebilir olmasını istemediğim başka bir div istersem?

— FrenkyB

23

Bootstrap kullanıyorsanız, sadece form-controlclass ekleyin . Örneğin:

class="form-control"

— paraplu
kaynak

Bu harika bir cevap ve bence en temiz cevap. Benim oyum bunun doğru cevap olması.

— aholtry

Kullanıcının alanı genişletmesine izin vermenin bir yolu var mı? Normal metin alanı bunu yapar.

— MARS

14

WebKit'te şunları yapabilirsiniz: -webkit-appearance: textarea;

— Abhi Beckert
kaynak

10

Bu çok uygun.

— Jared Farrish

3

Bir iç kutu gölgesi için gidebilirsiniz:

div[contenteditable=true] {
  box-shadow: inset 0px 1px 4px #666;
}

Jsfiddle'ı Jarish'ten güncelledim: http://jsfiddle.net/ZevvE/2/

— zamanlama
kaynak

1

Bunu, Jarish'in örneğinden genişletilmiş Chrome'un stiliyle eşleştirmek için öneririm. Önceki cevapların ihmal ettiği imleç özelliğine dikkat edin.

cursor: text;
border: 1px solid #ccc;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 200px;
overflow: auto;
padding: 2px;
resize: both;
-moz-box-shadow: inset 0px 1px 2px #ccc;
-webkit-box-shadow: inset 0px 1px 2px #ccc;
box-shadow: inset 0px 1px 2px #ccc;

— Robert Waddell
kaynak

1

Tüm bunlarla ilgili sorun, metin satırlarının uzun ve div overflow: auto'dan çok daha geniş olup olmadığını ele almamalarıdır. İşte bulduğum mükemmel çözüm:

İki div oluşturun. En geniş metin satırını işlemek için yeterince geniş bir iç div ve ardından iç div için tutucuya etki eden daha küçük bir dış div:

<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;">
    <div style="width:800px;">

     now really long text like this can be put in the text area and it will really <br/>
     look and act more like a real text area bla bla bla <br/>

    </div>
</div>

— Evan toder
kaynak

0

DIV'nizin altına benzer boyutta bir TEXTAREA yerleştirebilirsiniz, böylece standart kontrol çerçevesi div çevresinde görünür olur.

Kazara odak çalmayı önlemek için devre dışı bırakmak muhtemelen iyidir.

— wizzard0
kaynak

Evet, OP'nin cevapta aradığı şeyin bu olduğundan emin değilim.

— Jared Farrish

Metin alanının div içeriğiyle otomatik olarak ölçeklenmesini istiyorsanız, bu zorlaşıyor.

— Zamanlama