Rumah > hujung hadapan web > html tutorial > input文本框实现宽度自适应代码实例,input文本框_html/css_WEB-ITnose

input文本框实现宽度自适应代码实例,input文本框_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:38:08
asal
1883 orang telah melayarinya

 

 

本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果。

代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.100sucai.com" /><title>www.100sucai.com</title><script type="text/javascript">window.onload=function(){  var otxt=document.getElementById("txt");  otxt.onkeyup=function(){    this.size=(this.value.length>4?this.value.length:4);  }}</script></head><body><input type="text" id="txt" size="4"/> </body></html>	
Salin selepas log masuk

以上代码实现了我们的要求,代码非常的简单,注册onkeyup事件处理函数,此函数可以判断当前输入内容的长度是否大于默认长度,如果不大于,则文本框的长度就是4,否则就是输入内容的长度。

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan