多个输入框带数字个数

<!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="textml; charset=utf-8" />
<title>评论模块</title>
</head>

<body>

<div class="divRemark">
<div class="divInput" ><input onfocus="input_onfocus(this,200)" style="color:#F9C" readonly="readonly" value="我也说一句.." /></div>
    <div class="divTextArea" style="display:none">
      <textarea onblur="textarea_onblur(this)" onfocus="checkInputedCommentLegal(this,200)"></textarea>
      <br />
      <div class="divInfo">
         <span >0/200</span>
         <a href="javascript:void(0);" onclick="onSubmit(this)">提交</a>
      </div>
    </div> 
</div>

<div class="divRemark">
<div class="divInput" ><input onfocus="input_onfocus(this,200)" style="color:#F9C" readonly="readonly" value="我也说一句.." /></div>
    <div class="divTextArea" style="display:none">
      <textarea onblur="textarea_onblur(this)" onfocus="checkInputedCommentLegal(this,200)"></textarea>
      <br />
      <div class="divInfo">
         <span >0/200</span>
         <a href="javascript:void(0);" onclick="onSubmit(this)">提交</a>
      </div>
    </div> 
</div>

<div class="divRemark">
<div class="divInput" ><input onfocus="input_onfocus(this,200)" style="color:#F9C" readonly="readonly" value="我也说一句.." /></div>
    <div class="divTextArea" style="display:none">
      <textarea onblur="textarea_onblur(this)" onfocus="checkInputedCommentLegal(this,200)"></textarea>
      <br />
      <div class="divInfo">
         <span >0/200</span>
         <a href="javascript:void(0);" onclick="onSubmit(this)">提交</a>
      </div>
    </div> 
</div>

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="javascript">

/*
*函数名:input_onfocus
*功能:当inputObj获得焦点时,显示textarea评论输入框
*参数:inputObj-input对象(用于显示“我也说一句..”),maxLength-允许输入最大长度
*返回值:void
*/
function input_onfocus(inputObj,maxLength)
{
//显示textarea,隐藏input
$(inputObj).parent(".divInput").parent(".divRemark")
.find(".divTextArea").show().find("textarea").focus();
$(inputObj).parent(".divInput").parent(".divRemark").find(".divInput").hide();

//设置字数统计标签
var content_len = $(inputObj).parent(".divInput").parent(".divRemark")
.find(".divTextArea").find("textarea").val().length;
var labelSpan = $(inputObj).parent("div.divInput").parent("div.divRemark").find(".divTextArea").find("div.divInfo").find('span');
if (!labelSpan)
{
alert("null object");
return false;  
}

//设置标签值 
labelSpan.html(content_len+'/' + maxLength );

//设置字体颜色
if( content_len <= maxLength )
{
//输入合法
labelSpan.css("color","#000000");
}
else
{
//输入超限
labelSpan.css("color","#ff0000");
}

}

/*
*函数名:textarea_onblur
*功能:当textarea失去焦点时,如果内容为空显示input(“我也说一句”)
*参数:textareaObj-textarea对象
*返回值:void
*/
function textarea_onblur(textareaObj)
{
if($(textareaObj).val() == "" )
{
//显示input,隐藏textarea
$(textareaObj).parent(".divTextArea").hide();
$(textareaObj).parent(".divTextArea").parent(".divRemark")
.find(".divInput").show();
}
}

/*
*函数名:checkInputedCommentLegal
*功能:检查输入评论字符,如果字符输入大于maxLength统计字符变红
*参数:obj-textarea对象,maxLength-允许最大输入长度
*返回值:true-执行成功,false-执行失败
*/
function checkInputedCommentLegal(obj,maxLength)
{
$(obj).bind('focus keyup keydown',function()
{
  var content_len = $(this).val().length;
var labelSpan = $(this).parent("div.divTextArea").find("div.divInfo")
.find('span');
 
if (!labelSpan)
{
alert("null object");
return false;  
}

//设置标签值 
labelSpan.html(content_len+'/' + maxLength );

//设置字体颜色
if( content_len <= maxLength )
{
//输入合法
labelSpan.css("color","#000000");
}
else
{
//输入超限
labelSpan.css("color","#ff0000");
}
});
return true;
}

//提交
function onSubmit(aobj)
{
//获得输入字符
var divTextArea = $(aobj).parent(".divInfo").parent(".divTextArea");
alert( $(divTextArea).find("textarea").val() );

if(true/*这里应该为提交成功条件*/)
{
$(divTextArea).find("textarea").val("");//清除输入框信息

$(divTextArea).hide();
$(divTextArea).parent(".divRemark").find(".divInput").show();
}
}

</script>
</body>
<ml>
原文地址:https://www.cnblogs.com/lcuzhanglei/p/2526180.html