网站首页 » js » jquery实现点击文字可编辑并修改保存

jquery实现点击文字可编辑并修改保存

April 24, 2019 js

jquery实现点击文字可编辑并修改保存

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">    
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <link type="image/x-icon" href="favicon.ico" rel="SHORTCUT ICON" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>jquery实现点击文字可编辑并修改保存</title>
<style> 
    input{width:100%}
    input {border:1px solid #fff;background:#fff; font-size:14px;
     padding-left:5px; height:30px; line-height:30px; }  
</style> 
<body>
        <div class="">
            <input class="t" id="text" readonly value="这里是标题,点击文字后实现编辑文本功能" />
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $("#text").blur(function(){
                $(this).attr("readonly",true);    
                alert("提交事件");                
            });            
        });        
        $("#text").click(function(){
            $(this).attr("readonly",false);    
        });                
        </script>
    </body>  
  </html>
Title - Artist
0:00