Div没有占位符属性
<div id="editable" contentEditable="true"></div>
我想<Please your enter your Name>在DIV中显示当用户退格DIV中的整个文本,或者里面没有文字时,我该怎么办呢？
<!doctype html>
<head>
<meta charset="utf-8">
<title>Gazpo.com - HTML5 Inline text editing and saving </title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Helvetica,Arial,sans-serif;
color:#333333;
font-size:13px;
}
h1{
font-family: 'Droid Serif', Georgia, Times, serif;
font-size: 28px;
}
a{
color: #0071D8;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
:focus {
outline: 0;
}
#wrap{
width: 500px;
margin:0 auto;
overflow:auto;
}
#content{
background: #f7f7f7;
border-radius: 10px;
}
#editable {
padding: 10px;
}
#status{
display:none;
margin-bottom:15px;
padding:5px 10px;
border-radius:5px;
}
.success{
background: #B6D96C;
}
.error{
background: …使用Javascript
$(document).ready(function() {
var originaltext = $('#editable').val()
$("#editable").keydown(function(e){
if(e.which == 9)
{
var content = $('#editable').val();
var originaltext = $('#editable').val();
$.ajax({
url: 'save.php',
type: 'POST',
data:{
content: content
},
success:function (data) {
if (data == '1')
{
$("#status")
.addClass("success")
.html("Data saved successfully")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow');
}
else
{
$("#status")
.addClass("error")
.html("An error occured, the data could not be saved")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow');
}
}
});
}
});
$("#editable").click(function (e) {
$("#save").show();
e.stopPropagation();
});
$(document).click(function() {
$("#save").hide();
$('#editable').value = originaltext;
}); …