如何能实现文本框默认值，鼠标单击后消失，当鼠标焦点消失默认值又出现

最新推荐文章于 2024-04-09 18:47:05 发布

原创最新推荐文章于 2024-04-09 18:47:05 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #function

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该页面使用JavaScript实现了当文本输入框获得焦点时自动清除预设文本的功能。通过三个独立的函数分别控制三个输入框的行为，改善用户体验。

<html>
<head>
<script type="text/javascript">
var flag1=true;
var flag2=true;
var flag3=true;

function f1(){
var text1=document.getElementById("t1");
if(flag1==true){
text1.value="";
flag1=false;
}
}

function f2(){
var text2=document.getElementById("t2");
if(flag2==true){
text2.value="";
flag2=false;
}
}

function f3(){
var text3=document.getElementById("t3");
if(flag3==true){
text3.value="";
flag3=false;
}
}
</script>
</head>
<body>
<input type="text" id="t1" value="condition1" onfocus="f1()">
<input type="text" id="t2" value='condition2' onfocus="f2()">
<input type="text" id="t3" value='condition3' onfocus="f3()">
<input type="submit" value="提交"><br>
</body>
</html>