文本焦点小程序

金含

于 2016-08-18 12:57:00 发布

阅读量136

点赞数

文章标签： javascript ViewUI

本文介绍了一种利用HTML与JavaScript实现文本框焦点效果的方法，包括如何通过onFocus和onBlur事件来改变文本框提示信息的显示状态。此外，还展示了如何为按钮添加样式和交互效果，例如改变按钮颜色及响应鼠标悬停事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本框焦点问题</title>
</head>
<body>

<script type="text/javascript">
document.write("<input type=\"text=\" value=\"请输入用户名\" " +
"onfocus=\"if (value=='请输入用户名'){value=''}\"" +
"onblur=\"if(value==''){value='请输入用户名'}\">");
/*特色按钮的使用*/
document.write("<input type=\"button\" name=\"Button1\" value=\"按钮1\" size=\"10px\" style=\"background-color: cornflowerblue\">");
/*鼠标离开时颜色变化*/
document.write("<input type=\"button\" value=\"按钮会变化颜色\" onmouseover=this.style.color=\"red\" onmouseout=this.style.color=\"blue\" >");
</script>