<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .tp-user-biming { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } .tp-user-biming .fds { padding-right: .25rem; } .tp-user-biming input { height: 25px; outline: none; border: 1px solid #e5e0e0; box-sizing: border-box; width: 35%; background: #f6f5f5; padding: 0 .25rem; margin-right: .25rem; } .icon-biming { height: 20px; width: 20px; background: url(../img/f5.png) no-repeat; margin: 2px 0; display: block; } </style> <script src="jquery.js"></script> </head> <body> <div class="tp-user-biming"> <span id="biming"></span> <i class="icon-biming" id="icon-biming"></i> </div> <script> $(document).ready(function(){ $(".icon-biming").toggle( function() { var bm = $('#biming'); var str = bm.text(); bm.replaceWith("<input type='text' placeholder='笔名' id='inputValue' value='"+str+"' />"); }, function() { var iValue = $('#inputValue'); var istr = iValue.val(); iValue.replaceWith("<span id='biming' class='fds'>"+istr+"</span>"); } ); }); </script> </body> </html>
注：toggle() 方法在 jQuery 版本 1.8 中被废弃，在版本 1.9 中被移除。