html中点击列表文字弹出提示框?

html-css08

html中点击列表文字弹出提示框?,第1张

1、使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入内容')this.value=''">

2、<input id="email" type="text" placeholder="这里输入文字" size="22" />

placeholder="这里输入文字"

input设置默认显示文字的两种方式:

1.placeholder属性。在输入框为空的情况下会显示placeholder中的值。但是提交时不能直接取其值。

2.value属性。在输入框加载的时候输入框中的值。提交时可直接获取。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body {

margin: 0

padding: 0

}

#hide {

display: none

}

</style>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

$(function() {

$('#btn1').click(function() {

$('#hide').show()

var t = setTimeout("$('#hide').hide()", 5000)

})

var html = ''

$('#btn2').click(function(){

    html += '<div>生成的文字(5S后消失)</div>'

$('#apd').append(html)

var t = setTimeout("$('#apd').text('')", 5000)

html = ''

})

})

</script>

</head>

<body>

<div id="box1">

<button id="btn1">点击显示隐藏文字</button>

<div id="hide">

显示隐藏的文字(5S后消失)

</div>

</div>

<div id="box2">

<button id="btn2">点击生成文字</button>

<div id="apd">

</div>

</div>

</body>

</html>