2012-05-31 29 views
11

Giriş metni alanına kalın metin girmeye çalışıyorum. Html kodu bir metin alanı içinde yorumlanmadığı için bu konuda nasıl gideceğimi bilmiyorum, bu yüzden <b> gibi bir şey çalışmayacak. Sadece bazı metinleri katlamak mümkün mü? Kalın() gibi yöntemler dizenin etrafında yalnızca <b> ekler.Bir giriş metni alanına nasıl yazı yazılır, kalın mı?

+5

Basit bir giriş alanında değil. Bunun yerine [editable divs] 'a (http://blog.whatwg.org/the-road-to-html-5-contenteditable) bakın ya da yapmayın. –

+1

Girdi'yi mükemmel bir şekilde kaplayan bir öğe oluşturmazsanız, bu tam bir kabus demektir. RTE'lerin yapma şekli, içeriğiyle bir iframe kullanmaktır, böylece içeriği manüpüle edebilirler. – MetalFrog

+0

yinelenen soru burada olduğu gibi [http://stackoverflow.com/questions/5408292/just-trying-to-give-a-bold-font-to-an-input-text](http://stackoverflow.com/questions/5408292/sadece-almaya-a-bold-yazı tipi-giriş-metin) –

cevap

6

İşte bir numara.

INPUT alanı bir SPAN üzerindedir. 3 ilk karakterleri koyu olarak ekleyen bir işlev örneği. Eski tarayıcıyla saydamlık sorunu yaşayabilirsiniz. Bu durumda, kalın giriş olmadan normal giriş alanını terk edebilirsiniz.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>transp</title> 
    <style> 
     div{ 
      position:relative; 
     } 
     input, span{ 
      top:0; 
      position:absolute; 
      width:120px; 
     } 
     span{ 
      top:2px; 
      left:2px; 
      z-index:1; 
      overflow:hidden; 
     } 
     input{ 
      background:transparent; 
      z-index:2; 
     } 
    </style> 
</head> 
<body> 
<div> 
    <input onkeyup="bold3(this)" /> 
    <span id="back"></span> 
</div> 
<script> 
function bold3(inp){ 
    inp.style.color = 'transparent'; 
    var span = document.getElementById('back'); 
    span.innerHTML = 
     '<b>' + 
     inp.value.substr(0, 3) + 
     '</b>' + 
     inp.value.substr(3); 
} 
</script> 
</body> 
</html> 
+0

Bu cevabı bir şans vereceğim, üzerinde çalıştığım sayfanın dışında test ettim ve yeterince iyi çalışıyor gibi görünüyor. Teşekkürler – clinchergt

+0

Alışılmadık bir rota başlattığınıza dikkat edin ve yol boyunca bazı sürprizlerle koşabilirsiniz. Başka bir yaklaşım, biçimlendirilmiş sonucun altına ve altına yazdığınız bir giriş alanına sahip olmaktır. Burada sorulara cevap verdiğinizde olduğu gibi. – Mic

0

bu deneyin

Teşekkür:

<input type="text" style="font-weight: bold;" value="Some Value" /> 

Ama öğesinin içinde bütün metin kalın olarak görünecek bu şekilde. Ben metin sadece bir parça stil kolay bir yolu böyle, düzenlenebilir bir div kullanmak için

+5

OP ister ** girişin ** kısımlarının kalın olması gerekir. –

1

Belki muhtemel bir çözüm olur yok sanırım:

<div contentEditable="true"> 
    Lorem <b>ipsum</b> dolor 
</div> 

Bu değeri göndermek için çalışıyorsanız Bir formda, bu divın innerHTML'ini almak ve onu gizli bir girdiye veya başka bir şeye atamak için JavaScript kullanmanız gerekir.

+0

Bu en basit çözüm olabilir, eğer Mic'in çözümünü gerçek sayfada çalıştıramazsam kesinlikle kullanacağım. Aslında içHTML'yi elde etmeye çalıştım, böylece form bunu alabilirdi ama başarılı değildim, sadece html kodunu yok sayıyor. POST değil GET kullandım çünkü olabilir mi? – clinchergt

+0

@clinchergt: Bu konuda yardımcı olmak için kullandığınız bazı örnek kodları görmem gerekir. – Travesty3

2

Hangi tarayıcıları desteklemek istediğinize bağlıdır. Eğer sadece HTML5 tarayıcılarını desteklemek istiyorsanız, sadece içerikli bayrak seti ile bir div'a bırakın ve css ile bir girdi gibi görünün. yükü yönetmek için bunu ve JS görünümünün CSS kullanarak

<div> 
    <input type="text" style="font-weight: bold;" value="Bold text" /> 
    <input type="text" value="This is not" /> 
</div> 

: belki böyle bir şey yapmak daha

<div contenteditable>Text <b>bold</b></div> 

cesur bir çok kontrollü bir alanda ise

. Bu olsa çabuk çirkin olabilir.

0

biz doğal olarak ... şu sorunu, vb tanıma bağlantı, özel html biçimlendirmesi verir android görünümü gibi bir şey lazım.

0

Böyle bir şeye sahip olmanın en doğru yolu, kendi özel öğenizi oluşturmaktır.

Kendi <my-input></my-input> öğenizi oluşturabilir ve kendi girişinizi özelleştirebilirsiniz.

İlgili konular