文本框內容的隱藏與顯示( onfocus 與 onblur )

獲得焦點: onfocus

失去焦點: onblur

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input {
				color: #999999;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="" value="文字" />
		<script type="text/javascript">
			//獲取元素
			var text = document.querySelector('input');
			//獲得焦點事件 onfocus
			text.onfocus = function() {
				if(this.value === '文字') {
					this.value = ' ';
				}
				//獲得焦點把文本框內文字顏色變深
				this.style.color = '#333';
			}
			text.onblur = function() {
				if(this.value === ' ') {
					this.value = '文字';
				}
				//失去焦點把文本框內文字顏色變淺
				this.style.color = '#999';
			}
		</script>
	</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章