如何以编程方式选择IPYfutify中文本字段的所有内容？

Question

我想在克隆url时重现github的这种行为：单击时选择所有内容

在JavaScript中，它非常简单：

<input @focus="$event.target.select()">

在iPyFutify中，我可以构建组件：

import ipyvuetify as v
import pyperclip

class CopyLink(v.TextField):
    
    def __init__(self):

        super().__init__(
            class_ = "ma-5",
            v_model = 'je suis un link', 
            outlined = True,
            label = 'link',
            readonly = True,
            append_icon = 'mdi-clipboard-outline'
        )  

        self.on_event('click', self.copy_link)

    def copy_link(self, widget, event, data):

        # copy the link to clipboard using 
        pyperclip.copy(self.v_model)

        # select all the content in case pyperclip fail
        
        return

我可以使用pyperclip将值复制到剪贴板，但如果函数失败，我希望能够选择所有textfield内容。可能吗

Answer 1

在ipyvuetify中，无法选择文本字段的文本。可以使用模板模式实现：

import ipyvuetify as vy
import traitlets

class MyCopyPaste(vy.VuetifyTemplate):
    template = traitlets.Unicode('''
    
    <template>
        <v-col>
            <v-btn icon @click="copyToClipboard()">
                <v-icon>mdi-content-copy</v-icon>
            </v-btn>
            <textarea v-model="my_text" ref="text" style="display: none" />
        </v-col>    
    </template>
    
    <script>
        module.exports = {
            methods: {
                copyToClipboard() {
                    const txt = this.$refs.text
                    txt.style.display = 'block';
                    txt.select();
                    document.execCommand('copy');
                    txt.style.display = 'none';
                }
            }
        }
    </script>
    ''').tag(sync=True)
    
    my_text = traitlets.Unicode('').tag(sync=True)
    
mcp = MyCopyPaste()
mcp.my_text = 'Hello\nWorld'
mcp

Answer 2

事实上，Pyperclip在云托管的JupyterLab中不起作用。使用Clipboard web API，可以按如下方式定义一个可重用的自定义文本字段，并附加复制图标：

class TextFieldCopy(v.VuetifyTemplate):
    v_model = traitlets.Unicode(allow_none=True).tag(sync=True)
    def __init__(self, icon='mdi-clipboard-outline', props='', v_model=''):
        self.template = '''
        <v-text-field %s v-model='v_model' append-icon='%s' @click:append="clipW">
        </v-text-field>
        <script> {methods: {
            clipW() {navigator.clipboard.writeText(this.v_model)} }}
        </script>''' % (props, icon)
        self.v_model = v_model
        super().__init__()

tf = TextFieldCopy(
    props = 'ma-5 outlined label="link" readonly',
    v_model='je suis un link'
)

当使用clearable属性设置TextField并单击清除十字时，参数allow_none=True避免了Traitlets错误，因为v-model随后被设置为None

或者，文本字段和按钮可以是单独的组件，通过link链接在一起：

from ipywidgets import link

class BtnClipWriteText(v.VuetifyTemplate):
    text = traitlets.Unicode(allow_none=True).tag(sync=True)
    def __init__(self, props='icon', content='<v-icon>mdi-content-copy</v-icon>'):
        self.template = '''<v-btn %s @click="clipW">%s</v-btn>
        <script> {methods: {
            clipW() {navigator.clipboard.writeText(this.text)} }}
        </script>''' % (props, content)        
        super().__init__()

btn_copy = BtnClipWriteText()
tf = v.TextField(v_model = 'je suis un link')
link((tf, 'v_model'), (btn_copy, 'text'))

有关信息，可使用以下模板类似地实现将剪贴板内容粘贴到文本字段的相反功能：

class BtnClipReadText(v.VuetifyTemplate):
    text = traitlets.Unicode(allow_none=True).tag(sync=True)
    def __init__(self, props='icon', content='<v-icon>mdi-content-paste</v-icon>'):
        self.template = '''<v-btn %s @click="clipR">%s</v-btn>
        <script> {methods: {
            clipR() {navigator.clipboard.readText().then(
                clipText => this.text = clipText);}}}
        </script>''' % (props, content)
        super().__init__()