QTextEdit 多行输入框

QTextEdit 和 QPlainTextEdit 是 PyQt5 里的多行文字输入框元件，这篇教学会介绍如何在 PyQt5 视窗里加入 QTextEdit 和 QPlainTextEdit 多行文字输入框，并实作修改样式以及读取输入文字等基本应用。

快速导览：

• QTextEdit、QPlainTextEdit 的差异
• 加入 QTextEdit、QPlainTextEdit 多行输入框
• 多行输入框位置设定
• 多行输入框样式设定
• 多行输入框常用方法
• 取得多行输入框内容
• 改用 class 的写法

• PyQt6 版本参考：PyQt6 教学 - QTextEdit、QPlainTextEdit 多行输入框
• 因为 Google Colab 不支援 PyQt5，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

QTextEdit、QPlainTextEdit 的差异

QTextEdit、QPlainTextEdit 都是多行文字的输入框，如果只是要应用多行文字的输入，两者的“基本用法完全相同”，不过因为 QPlainTextEdit 是经过更多改良的多行输入框，输入的每个段落与字元的可以保留自己的属性，也支援一些特殊字元的功能 ( 例如 \n 换行符 )，可以进行更进阶的用法 ( 例如点击某一行，就让该行文字变色...等 )，如果单纯只是要使用多行文字输入，只要选择其中一个使用即可 ( 直接使用 QPlainTextEdit 就可以 )

参考：QTextEdit vs QPlainTextEdit

加入 QTextEdit、QPlainTextEdit 多行输入框

建立 PyQt5 视窗对象后，透过 QtWidgets.QLineEdit(widget) 方法，就能在指定的元件中建立多行输入框，下方的程序码执行后，会在视窗里加入 QTextEdit 和 QPlainTextEdit 多行输入框各一个。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 300)

input = QtWidgets.QTextEdit(Form)         # QTextEdit 多行輸入框
input.setGeometry(20,20,200,100)

input_p = QtWidgets.QPlainTextEdit(Form)  # QPlainTextEdit 多行輸入框
input_p.setGeometry(20,130,200,100)

Form.show()
sys.exit(app.exec_())

多行输入框位置设定

透过下列方法，可以将 QTextEdit、QPlainTextEdit 元件定位到指定的位置：

|方法|参数|说明| |--|--| |move()|x, y|设定摆放在父元件中的 xy 座标，x 往右为正，y 往下为正，尺寸根据内容自动延伸。| |setGeometry()|x, y, w, h|设定摆放在父元件中的 xy 座标和长宽尺寸，x 往右为正，y 往下为正，如果超过长宽尺寸，输入的文字会被裁切无法显示。|

下方的程序码执行后，会放入两个 QPlainTextEdit，一个使用 move() 定位并使用默认宽度，另外一个使用 setGeometry() 方法定位 ( QTextEdit 的作法完全相同 )。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(360, 300)

input_1 = QtWidgets.QPlainTextEdit(Form)
input_1.move(20,20)

input_2 = QtWidgets.QPlainTextEdit(Form)
input_2.setGeometry(20,230,200,50)

Form.show()
sys.exit(app.exec_())

多行输入框样式设定

透过 setStyleSheet()，可以使用类似网页的 CSS 语法设定 PlainTextEdit 样式，下方的程序码执行后，当输入框为焦点时，会变成白底蓝框红字的样式 ( QTextEdit 的作法完全相同 )。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(360, 300)

input = QtWidgets.QPlainTextEdit(Form)
input.setGeometry(20,20,200,100)
input.setStyleSheet('''
    QPlainTextEdit {
        border:1px solid #000;
        background:#ccc;
        color:#f00;
    }
    QPlainTextEdit:focus {
        border:3px solid #09c;
        background:#fff;
    }
''')

Form.show()
sys.exit(app.exec_())

多行输入框常用方法

下方列出使用多行输入框的常用方法：

取得多行输入框内容

运用 cursorPositionChanged.connect(fn) 方法，就能在输入框内容的光标位置改变时，执行特定的函数，下方的程序码执行后，当单行输入框的内容发生改变，就会透过另外一个输入框，显示光标所在的那一行的内容。

from PyQt5 import QtWidgets, QtGui,QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(360, 300)

def show():
    n = input_1.textCursor().blockNumber()                 # 取得所在行數
    text = input_1.document().findBlockByNumber(n).text()  # 取得該行內容
    input_2.setPlainText(text)                             # 另外一個輸入框顯示內容

input_1 = QtWidgets.QPlainTextEdit(Form)
input_1.setGeometry(20,20,150,200)
input_1.setStyleSheet('''
    QPlainTextEdit {
        border:1px solid #000;
    }
    QPlainTextEdit:focus {
        border:3px solid #09c;
    }
''')
input_1.cursorPositionChanged.connect(show)   # 游標改變時，執行 show 函式

input_2 = QtWidgets.QPlainTextEdit(Form)
input_2.setGeometry(180,20,150,200)

Form.show()
sys.exit(app.exec_())

改用 class 的写法

上方的程序码，亦可改用 class 的写法表示。

from PyQt5 import QtWidgets
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(360, 300)
        self.ui()

    def ui(self):
        self.input_1 = QtWidgets.QPlainTextEdit(self)
        self.input_1.setGeometry(20,20,150,200)
        self.input_1.setStyleSheet('''
            QPlainTextEdit {
                border:1px solid #000;
            }
            QPlainTextEdit:focus {
                border:3px solid #09c;
            }
        ''')
        self.input_1.cursorPositionChanged.connect(self.showMsg)

        self.input_2 = QtWidgets.QPlainTextEdit(self)
        self.input_2.setGeometry(180,20,150,200)

    def showMsg(self):
        n = self.input_1.textCursor().blockNumber()
        text = self.input_1.document().findBlockByNumber(n).text()
        self.input_2.setPlainText(text)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec_())

意见反馈