多个输入框带数字个数

zoukankan html css js c++ java

多个输入框带数字个数

<!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>

查看全文

相关阅读:
logstash 配置 logstash-forwarder (前名称：lumberjack)
你不知道的if,else
css样式
 表格表单
 学习第一天练习
 唯有作茧自缚，方可破茧成蝶
 第一周复习二（CSS样式表及其属性）
第一周复习一（ HTML表单form）
汉企第一天小记
 C语言 -- register关键字

原文地址：https://www.cnblogs.com/lcuzhanglei/p/2526180.html