来自 澳门金莎娱乐手机版 2019-11-21 05:05 的文章
当前位置: 金沙澳门官网网址 > 澳门金莎娱乐手机版 > 正文

福寿康宁文本框输入内容提示代码实例,字数实

实现文本框输入内容提示代码实例,文本框实例

实现文本框输入内容提示代码实例:
比较人性化的网站一般都是比较讲究细节的,比如文本框输入内容具有提示效果,在默认情况下,文本框有提示文本,当鼠标放入文本框输入文本的时候,提示文本会消失,下面就通过代码实例介绍一下如何实现此效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function(){
  var otxt=document.getElementById("txt");
  otxt.onfocus=function(){
    if(otxt.value=="请输入网站名称"){
      otxt.value="";
    }
  }
  otxt.onblur=function(){
    if(otxt.value==""){
      otxt.value="请输入网站名称";
    }
  }
} 
</script> 
</head> 
<body> 
<input type="text" id="txt" value="请输入网站名称"/>
</body> 
</html>

以上代码实现了我们的要求,代码非常的简单,这里就不多介绍了,就是为文本框注册onfocus和onblur事件,进行相关的判断然后进行调整文本框的value属性即可。

原文地址是:

最为原始地址是:

实现文本框输入内容提示代码实例: 比较人性化的网站一般都是比较讲究细节的,比如文本...

限制文本输入数量并且提示剩余字数代码实例,字数实例

限制文本输入数量并且提示剩余字数代码实例:

比较人性化的文本框一般都有这样的功能,输入文本的时候能够实时的显示还有剩余多少字数可以输入,下面就简单介绍一下如何实现此效果。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
function words_deal() 
{ 
  var curLength=$("#textarea").val().length; 
  if(curLength>20) 
  { 
    var num=$("#textarea").val().substr(0,20); 
    $("#textarea").val(num); 
    alert("超过字数限制,多出的字将被截断!" ); 
  } 
  else 
  { 
    $("#textCount").text(20-$("#textarea").val().length); 
  } 
} 
$(document).ready(function(){
  $("#textarea").keyup(words_deal)
})
</script> 
</head> 
<body> 
还剩余20个字可以输入<br /> 
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> 
</body> 
</html>

以上代码实现了我们自己的要求,当输入内容的时候可以实时提醒还剩余多少文字可以输入。

推荐参阅: jQuery的keyup事件一章节。

原文地址是:

最为原始地址是:

限制文本输入数量并且提示剩余字数代码实例: 比较人性化的文本框一般都有这样...

本文由金沙澳门官网网址发布于澳门金莎娱乐手机版,转载请注明出处:福寿康宁文本框输入内容提示代码实例,字数实

关键词: