så här ställer du in bredden på en inmatningstextruta i HTML, CSS och JavaScript

oktober 27, 2020 admin 0 Comments

i det här inlägget ser vi hur du ställer in bredden på en inmatningstextruta i HTML, CSS och JavaScript.

ange bredd i HTML

i HTML kan du använda attributetwidth för att ställa in bredden på ett element.,

label for=”name”>Enter a value:</label>

<input type=”text” style=”width: 200px;”>
</body>
</html>

Edit in JSFiddle

Alternatively, you can also use the size attribute to define the width of the <input>.,ody>

<label for=”name”>Enter a value:</label>
<input type=”text” size=”20″>
</body>
</html>

Edit in JSFiddle

Set width with CSS

It is good practice to separate CSS from HTML markup., Tanken är att definiera en klass för att ställa inwidth CSS-egendom.

Redigera i JSFiddle

Alternativt kan du också använda CSS-väljaren i en textruta för att ställa in egenskapenwidth CSS.

Redigera i JSFiddle

Ställ in bredd med JavaScript

med JavaScript kan du använda funktionensetAttribute() för att ställa in värdet försize I inmatningstextrutan.

Redigera i JSFiddle

Du kan också dynamiskt ändra bredden på en textruta så att den matchar längden på inmatningen., This can be easily done by setting the size attribute on key events.

Edit in JSFiddle

(21 votes, average: 5.00 out of 5)

Thanks for reading.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *