首页 > 其他分享 >blazor组建实现替换菜单,实现剪切、复制、粘贴,全选操作

blazor组建实现替换菜单,实现剪切、复制、粘贴,全选操作

时间:2023-06-14 15:45:31浏览次数:49  
标签:JSRuntime getElementById private myTextArea 全选 select blazor document 粘贴

<div>
    <button @onclick="SelectAll">Select All</button>
    <button @onclick="Copy">Copy</button>
    <button @onclick="Cut">Cut</button>
    <button @onclick="Paste">Paste</button>
</div>

<textarea id="myTextArea"></textarea>

@code {
    private ElementReference myTextArea;

    private void SelectAll()
    {
        JSRuntime.InvokeVoidAsync("eval", "document.getElementById('myTextArea').select()");
    }

    private void Copy()
    {
        JSRuntime.InvokeVoidAsync("eval", "document.getElementById('myTextArea').select(); document.execCommand('copy');");
    }

    private void Cut()
    {
        JSRuntime.InvokeVoidAsync("eval", "document.getElementById('myTextArea').select(); document.execCommand('cut');");
    }

    private void Paste()
    {
        JSRuntime.InvokeVoidAsync("eval", "document.getElementById('myTextArea').select(); document.execCommand('paste');");
    }
}

补充:如果粘贴不可用时,可以替换为以下代码,获取到剪切板中的信息

var text = await jsRuntime.InvokeAsync<string>("navigator.clipboard.readText");

 

标签:JSRuntime,getElementById,private,myTextArea,全选,select,blazor,document,粘贴
From: https://www.cnblogs.com/LSYLY97/p/17480432.html

相关文章

  • wordpress从word复制粘贴公式
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......
  • 博客从word复制粘贴公式
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • windows复制粘贴功能失效
    1、如果远程复制正在进行,先使用任务管理器,强制结束,将任务管理器面板切换到进程,如下图:找到rdpclip.exe,选中它,然后点击结束进程。(电脑主要依赖该进程进行粘贴)2、键盘上按Win+R组合键,弹出“运行”窗口,输入rdpclip.exe,按回车,重新启动复制粘贴功能,如下图:启动成功后,就可以正常使......
  • tmux中的复制粘贴
    在tmux中,ctrl+c和ctrl+v无法进行复制粘贴。按住shift可以恢复鼠标右键快捷模式,如下图所示,然后就可以选择复制或粘贴了。 ......
  • Winform/WPF Clipboard之剪切复制粘贴
    转载自作者:心存善念本文地址:https://www.cnblogs.com/xcsn/p/4678364.htmWinform///<summary>///复制粘贴帮助类///</summary>publicclassClipboardHelper{///<summary>///复制到剪切板///</summary>//......
  • word公式粘贴到富文本编辑器
    ​ 1.编辑器修改(可选)1.1在 ueditor/config.json 中添加代码块    /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action名称 */    "wordFieldName":"upfile",/* 提交的视频表单名称 */    "wordPathFormat":"/p......
  • js实现复制粘贴
    在一些页面里,有时候会需要用户点击按钮或者控件需要把一些文字内容写入用户设备的剪切板里。在js中如何通过代码实现?接下来是两种实现方法!使用document.execCommandAPI注意document.execCommandAPI是同步执行,如果数据量大可能会阻塞页面加载,这种办法能兼容老版本浏览器和大......
  • 如何将word公式粘贴到百度富文本编辑器里面
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • 如何将word图片粘贴到百度富文本编辑器里面
    ​ 由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来......
  • 如何将word图片粘贴到百度UEditor里面
    ​图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪贴......