자바스크립트 모방 타오바오 검색창 입력 이벤트 구현
- 陈政宽～원래의
- 2017-06-28 11:38:271950검색
이 글은 주로 타오바오를 모방한 JSSearchbox 사용자 입력 이벤트를 소개합니다. 도움이 필요한 친구들은 참고하세요
타오바오는 우리가 자주 이용하는 온라인 쇼핑 플랫폼입니다. 타오바오 홈페이지를 열고 타오바오에서 검색창을 찾으세요.
보시다시피, 페이지가 열리면 검색창에 회색 글꼴인 "Girls' High Heels"와 깜박이는 커서를 볼 수 있습니다. 사용자가 클릭하여 입력하면 회색 텍스트가 사라집니다. 사용자가 텍스트 상자의 모든 내용을 지우면 회색 텍스트가 자동으로 복원됩니다.
다음으로 이 작은 사례에서는 이러한 효과를 구현하는 방법, 즉 사용자 입력 이벤트를 소개합니다.
사용자 입력을 결정하는 이벤트에는 oninput 및 onpropertychange가 포함됩니다. 물론 상상할 수 있듯이 브라우저 호환성 문제로 인해 다른 상황에서 나타납니다. 일반 브라우저는 oninput을 지원하는 반면 IE6, IE7 및 IE8은 onpropertychange를 지원합니다.
시간을 절약하기 위해 더 이상 Taobao CSS 스타일을 모방하지 않습니다.
코드 및 분석:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断用户输入事件第2遍oninput 和onpropertychange 的用法</title>
</head>
<style>
.search {
width:300px;
height: 30px;
margin: 100px auto;
position: relative;
}
.search input {
width:200px;
height:25px;
}
.search label {
font-size: 12px;
color:#ccc;
position: absolute;
top:8px;
left:10px;
cursor: text;
}
</style>
<script type="text/javascript">
业务逻辑分析：
// 1.内容为空时，光标和默认字显示在搜索框。自动获取焦点
// 2.当输入内容时，默认字消失。用oninput事件
window.onload = function () {
function $(id){ return document.getElementById(id);}
$("txt").focus();//自动获取光标方法
$("txt").oninput = $("txt").onpropertychange = function () {
//oninput 大部分浏览器支持 检测用户表单输入内容
//onpropertychange ie678 检测用户表单输入内容
if ( this.value == ""){
// 首先判断文本框里的值是否为空。注意用双等号！
$("message").style.display = "block";
} else {
$("message").style.display = "none";
}
}
}
</script>
<body>
<p class="search">
<input type="text" id="txt">
<label for="txt" id="message">仿淘宝搜索框</label>
<!-- 注意label 中for属性 值指向 input 的id值 ，意思是把label标签和input表单相关联。
label 元素不会向用户呈现任何特殊效果。当用户在label元素内点击文本， 浏览器就会自动将焦点转到和标签相关联的表单控件上。 -->
</p>
</body>
</html>효과:
위는 편집자가 소개한 JS 모방 Taobao 검색창 사용자 입력 이벤트의 구현입니다. 궁금한 점이 있으면 도움이 되길 바랍니다. 나에게 메시지를 남겨주시면 시간 내에 답변해 드리겠습니다. 또한 Script House 웹사이트를 지원해 주시는 모든 분들께 감사의 말씀을 전하고 싶습니다!
위 내용은 자바스크립트 모방 타오바오 검색창 입력 이벤트 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!