<div>请在下面输入要修改的文字</div>
<div><textarea id=input style="width:400px height:200px border:1px solid #888"></textarea></div>
<button id=btn>确认修改</button>
<script>
window.onload=function(){
var txt=localStorage["text"]
if(txt)text.innerHTML=txt
btn.onclick=function(){
if(input.value){
localStorage["text"]=input.value
text.innerHTML=input.value
alert("文字已修改，你可以刷新一下看看是否有效")
}
}
}
</script>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
var obj = $(this).val()
window.alert(obj)
if (obj == '编辑') {
$('#btn2').attr('type','text'),
$(this).val('保存')
}else(
$('#btn2').attr('type','button'),
$(this).val('编辑')
)
})
})
</script>
<style type="text/css">
#btn1 {
height: 30px
width: 100px
margin-bottom: 10px
}
#btn2 {
display: block
height: 30px
width: 100px
}
input[type=button] {
overflow: hidden
}
</style>
</head>
<body>
<input id="btn1" type="button" value="编辑" />
<input id="btn2" type="button" value="测试按钮">
</body>
</html>
实现的大致思路是先获取到该输入框的值，然后判断该输入框的值是否为空，如果为空直接给出不能为空的相关提示，如果不为空在进行保存等下一步操作。
工具原料：编辑器、浏览器
1、首先设置保存按钮的的点击事件，点击时触发获取输入框的值进行是否为空判断，为空则提示，不为空进行保存操作，简单的代码示例如下：
<script>$(function(){
$('btn').click(function(){//给保存按钮绑定点击事件
var value =$('input').val()//获取输入框的值
if(!(value=='')){//进行值的判断
alert("不能为空")
}else{
//保存逻辑
}
})
})
</script>
2、执行的结果是输入为空点击按钮会提示不能为空，否则则进入保存的逻辑。
