1. 程式人生 > >搜索框的實現

搜索框的實現

gin ace text tag 瀏覽器 tel width post utf

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--這裏註意函數名要首字母大寫,小寫的話不生效-->
<div style="width: 60px;margin: 0 auto">
<input id="i1" type="text" value="請輸入內容" onfocus="Foo();" onblur="Blur();"/>
<!--目前好多新瀏覽器支持的格式-->
<input id="i2" type="text" placeholder="請輸入內容"/>
</div>
<script>
function Foo() {
var tag = document.getElementById("i1");
var val = tag.value;
if(val == "請輸入內容"){tag.value=""};
}
function Blur() {
var tag = document.getElementById("i1");
var val = tag.value;
if(val.length == 0){tag.value="請輸入內容"};
}
</script>
</body>
</html>

搜索框的實現