jsjquery点击确认按钮保存修改。

JavaScript010

jsjquery点击确认按钮保存修改。,第1张

<div id=text style="width:400px height:200px border:1px solid #888">这是一开始显示的文字</div>

<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、执行的结果是输入为空点击按钮会提示不能为空，否则则进入保存的逻辑。