Rumah > pembangunan bahagian belakang > tutorial php > javascript - 怎么在点击确定按钮后退出 input 编辑状态,并且按钮恢复到修改按钮

javascript - 怎么在点击确定按钮后退出 input 编辑状态,并且按钮恢复到修改按钮

WBOY
Lepaskan: 2016-06-06 20:33:39
asal
1457 orang telah melayarinya

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<code><div class="row cl">

<label class="form-label col-3">测试:</label>

<div class="formControls col-6">

<label><span id="OrderTime">待修改文字</span></label>

</div>

<input id="changeOrderTime" type="button" value="修改" onclick="changeOrderTime()">

<button style="display:none" id="timeChangeOK">确定</button>

<script type="text/javascript">

function changeOrderTime(){

document.getElementById('timeChangeOK').style.display='block';

document.getElementById('changeOrderTime').style.display='none';

var o = document.getElementById("OrderTime");

var c = o.innerHTML;

o.innerHTML = "<input type='text' value='" + c + "'/>"

}

</script>

</div>

</code>

Salin selepas log masuk
Salin selepas log masuk

现在这段代码是可以在点击修改后 按钮变为确定,并且input输入框会出现

回复内容:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<code><div class="row cl">

<label class="form-label col-3">测试:</label>

<div class="formControls col-6">

<label><span id="OrderTime">待修改文字</span></label>

</div>

<input id="changeOrderTime" type="button" value="修改" onclick="changeOrderTime()">

<button style="display:none" id="timeChangeOK">确定</button>

<script type="text/javascript">

function changeOrderTime(){

document.getElementById('timeChangeOK').style.display='block';

document.getElementById('changeOrderTime').style.display='none';

var o = document.getElementById("OrderTime");

var c = o.innerHTML;

o.innerHTML = "<input type='text' value='" + c + "'/>"

}

</script>

</div>

</code>

Salin selepas log masuk
Salin selepas log masuk

现在这段代码是可以在点击修改后 按钮变为确定,并且input输入框会出现

给你动态生成的input绑定一个keyup或者keydown事件。我都做法是监听回车键Enter

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<code>// 首先给你动态生成的 input 给一个 id 或者 class ,方便获取 dom 。

o.innerHTML = "<input type="text" id="demo" value='" + c + "'>"

 

function changeOrderTime(){

    document.getElementById('timeChangeOK').style.display='block';

    document.getElementById('changeOrderTime').style.display='none';

    var o = document.getElementById("OrderTime");

    var c = o.innerHTML;

    o.innerHTML = "<input type="text" id="demo" value='" + c + "'>"

}

timeChangeOK.addEventListener('click', function(){

    var o = document.getElementById("OrderTime");;

    o.innerHTML = document.getElementById('demo').value;

 

    document.getElementById('timeChangeOK').style.display='none';

    document.getElementById('changeOrderTime').style.display='block';

});

</code>

Salin selepas log masuk

用了jquery简单的写了一下,这里是提前把 input写到 html里面,在js控制显示或者隐藏操作。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<code><div class="row cl">

<label class="form-label col-3">测试:</label>

<div class="formControls col-6">

<label><span id="OrderTime">待修改文字</span>

    <input type="text" id="OrderTimeInput" style="display:none">

</label>

</div>

<input id="changeOrderTime" type="button" value="修改" onclick="changeOrderTime()">

<button style="display:none" id="timeChangeOK">确定</button>

<script type="text/javascript">

function changeOrderTime(){

    var spanValue = $("#OrderTime").text();

    $("#OrderTimeInput").val(spanValue);

    $("#OrderTimeInput").show();

    $("#OrderTime").hide();

    $("#changeOrderTime").hide();

    $("#timeChangeOK").show();

}

$("#timeChangeOK").click(function(){

    var inputValue = $("#OrderTimeInput").val();

    $("#OrderTime").text(inputValue);

    $("#OrderTimeInput").hide();

    $("#OrderTime").show();

    $("#changeOrderTime").show();

    $("#timeChangeOK").hide();

});

</script>

 

 

                            </div></code>

Salin selepas log masuk
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan