web前端html实例-实现文本框输入内容提示

72 阅读 0 评论 48 点赞

我是靠谱客的博主外向便当，最近开发中收集的这篇文章主要介绍web前端html实例-实现文本框输入内容提示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>web前端学习扣qun：731771211  每日分享技术，学术交流</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属性即可。