如何在ipyvuetify中以编程方式选择TextField的所有内容？

Question

当你克隆一个url时，我想重现github的这种行为:点击时选择所有内容。

在JavaScript中，事情就是这么简单：

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

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

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将值复制到剪贴板，但如果函数失败，我希望能够选择所有文本字段内容。有可能吗？

Answer 1

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

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，可按如下方式定义带附加副本图标的可重用自定义TextField：

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可避免Traitlet错误，因为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__()