jquery清空文本框内容多个方法与例子

发布时间:2020-11-13编辑:脚本学堂
jquery如何清空文本框内容,通过实例学习jquery对文本框内容的清除操作,并分享了一个js清空text文本框中内容的例子。

例子,jquery清空文本框内容
 

复制代码 代码示例:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清空文本框内容 - www.jb200.com</title>
<script type="text/javascript" src="/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
   $('input:button').click(function(){
     $('.input').val("");
    });
  })
</script>
</head>
<body>
<input size="72" class="input" maxlength="64" name="aaa" type="text">
<input size="72" class="input" maxlength="64" name="bbb" type="text">
<input size="72" class="input" maxlength="64" name="ccc" type="text">
<input value="清空全部" onClick="" type="button">
</body>
</html>

清空文本框的内容

jquery实现:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>清空文本框的内容_www.jb200.com</title> 
<script type="text/javascript" src="/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
 $(function(){ 
   $('input:reset').click(function(){ 
     $('.input').val(""); 
    }); 
  }); 
  }); 
</script> 
</head> 
<body> 
<input size="72" class="input" maxlength="64" name="aaa" type="text" value="nihao"> 
<input size="72" class="input" maxlength="64" name="bbb" type="text" value="nihao2"> 
<input size="72" class="input" maxlength="64" name="ccc" type="text" value="nihao3"> 
<input value="清空全部" onClick="" type="reset"> 
</body> 
</html> 

javascript实现:只清空input的type 是text 文本框的内容
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script LANGUAGE="JavaScript"> 
    function doReset(){ 
    for(i=0;i<document.all.tags("input").length;i++){ 
        if(document.all.tags("input")[i].type=="text"){ 
            document.all.tags("input")[i].value=""; 
        } 
    } 

</script> 
</head>    
<body> 
<input size="72" class="input" maxlength="64" name="aaa" type="text" value="nihao"> 
<input size="72" class="input" maxlength="64" name="bbb" type="text" value="nihao2"> 
<input size="72" class="input" maxlength="64" name="ccc" type="text" value="nihao3"> 
<input value="清空全部" onClick="doReset()" type="button"> 
</body> 
</html>