點選文字變成可編輯的文字

阿新 • • 發佈：2019-02-20

方法一（JS控制）：
首先弄清楚我們完成這個工作要做些什麼：
1、點選文建立一個文字框（input）；
2、將原文字的內容放到文字框裡；
3、當我們點選別的區域時文字框變成不可編輯的文字；
4、此時文字應該是修改過後的（如果有修改）；
搞清楚原理那麼實現起來就很簡單了，附上原始碼：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title 
>
    <style>
        p{ line-height: 30px; font-size: 26px; margin: 50px; }
        .edit{ height: 30px;line-height: 30px; font-size: 16px; padding: 0 10px;  }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script>
    $(function(){
        $('p' 
).click(function(){
            var td=$(this); //為後面文字框變成文字鋪墊
            var text=$(this).text();
            var input=$('<input type="text" class="edit" value="'+text+'">');
            $(this).html( input );

            $('input').click(function(){
                return false;
            }); //阻止表單預設點選行為 


            $('input').select(); //點選自動全選中表單的內容

            $('input').blur(function(){
                var nextxt=$(this).val();
                td.html(nextxt);
            }); //表單失去焦點文字框變成文字

        });
    })
    </script>
</head>
<body>
    <p>這是一段可以編輯的文字</p>
</body>
</html>

在這段程式碼中關於開始為變數td賦值this,這是因為後面點選別的地方時需要將文字框變成文字，而html()函式用於設定或返回當前jQuery物件所匹配的DOM元素內的html內容。該函式的用途相當於設定或獲取DOM元素的innerHTML屬性值。就是說表單元素是不能使用html()這個方法的，所以在之前用箇中間變數儲存this的值。
方法二：
contentEditable是html中的一個屬性。設定html的contentEditable=‘true’時，即可開啟該元素的編輯模式。

<p contenteditable = "true">這是一段可以編輯的文字</p>

點選文字變成可編輯的文字

Android點選顯示一個可編輯文字的dialog（解決失去游標問題）

幾種實現點選修改按鈕可編輯文字，不點則不可編輯的方式

點選文字變成可編輯的文字

點選後變為可編輯狀態（ajax非同步提交）

layui點選按鈕新增可編輯的一行

table點選實現可編輯文字

點選一鍵切換讓文字從不可以編輯到編輯狀態

js點選使內容變成可編輯狀態

react狀態的使用：實現一個文字框點選按鈕之前是文字框點選以後變成密碼框並且按鈕的內容也改變

什麼是掃描件PDF？掃描件PDF如何轉換成可編輯文字？

雙擊文字實現可編輯

可編輯文字

解決點選頁面按鈕時會選中文字出現藍色問題

zbb20181214 js,html 點選頁面出現遊走文字富強民主民主

點選 UITextField 清除按鈕，文字框中內容清除

點選複製按鈕複製指定文字內容，實現網頁中的複製功能

Android定製控制元件：帶圖示的TextView和可編輯文字框（附專案原始碼）

jQuery獲取所點選ul中li的文字值

ListView條目點選時和點選後圖片顏色、文字顏色、條目背景更改大全

Android點選Button按鈕切換按鈕文字顯示

點選文字變成可編輯的文字

相關推薦