Bir giriş alanının değerini ayarlama


Yanıtlar:


819

Bunu yapmanın bir yolu:

document.getElementById("mytext").value = "My value";

6
Ben kullanıcı alanı tıklarsa vale NULL yapmak için bir yolu var mı?
SebastianOpperman

4
Evet, giriş alanına değeri tıklayan bir olay işleyicisi atayın. Örnek: elem.onclick = clearField (); // bu, değeri yukarıdaki cevaba benzer şekilde hiçbir şeye ayarlayarak alanı silen bir işleve işaret eder.
James

1
benim için işe yaramadı. yukarıdakiler değer niteliğini yaratacak mı?
Mart'ta Dchris

2
Giriş etiketinin kendisinin değerini değiştirmeye çalışıyorsanız bu işe yaramaz. Açıklığa kavuşturmak için, tıklandığında değerini değiştirmesi gereken bir düğme varsa, bunu "this.parentNode.getElementByTagName ('input') ile değiştiremez gibi görünmüyorum. Style.display = 'none ';" ne de this.style.display = 'none' kullanarak; Ayrıca, ".style = display: none; ';"
MahNas92

7
Yukarıdaki soruya verilen bu ve diğer cevaplar, varsayılan değerin değiştirileceğini göz ardı ediyor gibi görünüyor . Kullanıldığında .value = ...yalnızca geçerli değer değişir. Formun sıfırlanması ( <input type="reset" />örneğin ile) , değeri orijinal haline geri döndürür. Buna karşılık, setAttribute("value", ...)Firefox ve Chrome'da düzgün çalışır. Varsayılan değer değiştirilir, ancak gerçek değer yalnızca kullanıcı daha önce değiştirmediyse değiştirilir. Ancak, setAttributetarayıcı uyumluluğu nedeniyle önerilmez. Başka olasılık var mı?
JojOatXGME

55

formunuz aşağıdaki gibi bir giriş alanı içeriyorsa

<input type='text' id='id1' />

daha sonra değerini aşağıdaki gibi ayarlamak için javascript kodunu aşağıdaki gibi yazabilirsiniz

document.getElementById('id1').value='text to be displayed' ; 

52

'SetAttribute' işlevini kullanıyorum:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>

19
valuedoğrudan nokta gösterimi kullanılarak erişilmelidir: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute , orijinal değerle ilgilenmek için yalnızca set / getAttribute kullanırsınız. DOM yüklendikten sonra .value, öğenin gerçek çalışma değerini gösterir.
Chris Baker

4
@ChrisBaker Yapabilseydim bu cevabı +1000 olurdu. Ben uygulamayı otomatikleştirmek için giriş alanları tarar bir 3. taraf uygulaması var (sayfam gömülü yani Denetim render). Bu, giriş alanlarının müşterinin uygulaması tarafından tüketildiği benzersiz bir senaryodur. Doküman hazır fonksiyonumda .value kullanılarak giriş alanları geri gönderildikten hemen sonra sıfırlanamadı. Bir sonraki zaman uyumsuz postback kullanıcı başlatacak, daha önce tıkladıkları bir şey otomatikleştirmek için bu giriş değerleri yeniden olurdu ve "onları unutmak" için sayfaya ihtiyacım vardı. Bu ihtiyacım olan hacky büyülü sos. Teşekkürler Pepe ve Chris!
MikeTeeVee

3
Yii 2.0 kullanıyorum ve doğrudan .value = '' ayarı düzgün form doğrulama alanında çalışmaz. SetAttribute ('değer', '...') kullanımı düzgün bir şekilde işlenir. Teşekkürler!
ekscrypto

Çözülen garip bir sorunum var setAttribute. Benim sorunum bir işlev çağrısı aracılığıyla bir giriş değerini değiştirmek, son değiştirilen girişleri de değiştirmek oldu.
SAMPro

Yalnızca bu yanıtı kullanarak pop-up mod girişine (metin) değer ayarlayabilirim. .value benim için çalışmadı. Teşekkür ederim
Ula

19

Bunları deneyin.

document.getElementById("current").value = 12

// or

var current = document.getElementById("current");
current.value = 12

2
Metin olmayan değerleri asla bu alanlara ayarlamayın. Tekrar okursanız, bazı tarayıcılarda dize (!)
Okuyacaksınız

18

Cevap gerçekten basit

// Your HTML text field

<input type="text" name="name" id="txt">

//Your javascript

<script type="text/javascript"> 
document.getElementById("txt").value = "My default value";
</script>

Veya JavaScript'ten tamamen kaçınmak istiyorsanız: Yalnızca HTML kullanarak tanımlayabilirsiniz

<input type="text" name="name" id="txt" value="My default value">

6
Burada sadece bir kişinin bu valueözelliği kullanmayı önerdiği şaşırtıcı ...
Algy Taylor

@AlgyTaylor çabalarınızı takdir ve harika yorumunuz için teşekkür ederim
php-coder

15

Birden çok form kullanıyorsanız şunları kullanabilirsiniz:

<form name='myForm'>
    <input type='text' name='name' value=''>
</form>

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>

3
Bu yanıtı sevmemin sebebi, DOM öğesi kimliği yerine formun "name" özniteliğini kullanmanızdır, neden ihtiyacınız olmadığında form girişlerinin her birine neden bir kimlik alanı eklemelisiniz?
titreme

@tremor tamamen kabul etti ve bu "id" değil "name" kullanarak bulduğum ilk cevap.
avokado

8

Basit cevap Javascript'te değil, yer tutucuyu almanın en basit yolu yer tutucu özelliğidir.

<input type="text" name="text_box_1" placeholder="My Default Value" />

1
Buradaki sorun, Internet Explorer için hiç çalışmıyor olmasıdır. IE istemcileri olmayacağını biliyorsanız, evet, bu en iyi cevaptır.
Sifu

2
@Sifu Bu muhtemelen aslında bile yapmak iyi bir şeydir do (muhtemelen bir JavaScript çözümü ek olarak) IE müşterimiz var biliyor alan boşaltıldığı zaman o da değeri erme gibi.
ahruss

1
@Sifu, IE yer tutucu özelliğini desteklemediğinde, IE'yi kullanın ve www.1c3br3ak3r-multimedia.ca adresine gidin ve arama çubuğuna bakın, yer tutucu özelliğini kullanır
RWolfe

1
@Jdoonan aslında çok uzun zaman önce değil - caniuse.com/#feat=input-placeholder yer tutucusu IE10 ve üzeri sürümlerde desteklenir
danwellman

6

Basit; Bir örnek:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
var elem = document.getElementById("example"); // Get text field
elem.value = "My default value"; // Change field
</script>

4
document.getElementById("fieldId").value = "Value";

veya

document.forms['formId']['fieldId'].value = "Value";

veya

document.getElementById("fieldId").setAttribute('value','Value');

3
setAttribute ( 'değeri', 'değer'); Chrome'da benim için metin kutusundaki görünür değeri ayarlamıyor.
Curtis

1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


<script>
var form_value = document.getElementById("inputid").value;
</script>    

Varsayılan değeri yeni bir değerle de değiştirebilirsiniz

<script>
document.getElementById("inputid").value = 4000;     
</script>

1

Html'de kullandığınız bu bölüm

<input id="latitude" type="text" name="latitude"></p>

Bu javaScript:

<script>
document.getElementById("latitude").value=25;
</script>

0

Ayrıca deneyebilirsiniz:

document.getElementById('theID').value = 'new value';

3
Yeni bir değer ayarlama değil varsayılan değer oluşturmaya. Bu nedenle, bu sorunu çözmez. Yeterli saygınlık kazandıktan sonra yayının yorumu olarak bunu söylemelisiniz.
Daniel Cheung
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.