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

最新推荐文章于 2024-07-03 09:05:02 发布

魔方编程

最新推荐文章于 2024-07-03 09:05:02 发布

阅读量5.2k

点赞数 1

文章标签：前端 html 前端开发 html教程前端教程

本文链接：https://blog.csdn.net/wewfdf/article/details/101720163

版权

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

代码如下:

<!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属性即可。