本文记录于 2024 年 11 月。
升级前 | 期望(最新正式版) | 最终选择 | |
操作系统 | Alibaba Cloud Linux 3 | Alibaba Cloud Linux 3 | Alibaba Cloud Linux 3 |
管理面板 | 宝塔面板 Linux 版 9.2.0 | 宝塔面板 Linux 版 9.2.0 | 宝塔面板 Linux 版 9.2.0 |
Web 服务 | nginx 1.24 | nginx 1.24 | nginx 1.24 |
脚本语言 | PHP 7.4 | PHP 8.2 | PHP 8.2 |
数据库 | PolarDB MySQL 5.6 | RDS MySQL 9.1 | PolarDB MySQL 8.0 |
论坛程序 | Discuz! X3.4 GBK | Discuz! X5.0 | Discuz! X3.5 UTF8 |
版本选择原因:
Discuz! X5 刚刚发布,生态尚未成熟,考虑到是老论坛升级,所以选择 X3.5。
Discuz! X3.5 目前最高支持 PHP 8.2、MySQL 8.0。
完整升级步骤:
购买新的 ECS、PolarDB,具体环境配置步骤参此文;
安装宝塔面板并配置;
安装 nginx 及 PHP;
创建网站、配置 SSL、伪静态、防盗链、可写目录禁执行、仅允许部分入口文件执行等(.conf);
配置 hosts;
如果是正式升级阶段,关闭论坛,防止产生新数据。
备份原网站程序、PolarDB 数据库;
PolarDB 创建快照。
测试阶段:从快照还原到新实例(MySQL 5.6 不能直接恢复到 MySQL 8.0),然后从 5.6 迁移到 8.0.x;
正式阶段:全量模式直接从原实例迁移到 8.0.x,若增量模式且存在触发器,建议从快照还原;
上传原网站程序到新的站点目录下;
按 Discuz! X 升级文档升级 X3.4 至 X3.5;详情见下文 ↓;
升级完成后切换到 PHP 8;
配置 OSS、Redis、更新缓存等;
测试论坛基本功能是否正常;检查附件是否能够正常上传;检查附件是否正常显示;全面检查控制台配置;
逐个开启插件并检查兼容性(短信通、马甲引擎等);
按二开备忘录逐个按需进行二开;
逐个修改调用论坛接口的项目及直接调用论坛数据库的项目;
调试 MAGAPP 接口;
尝试强制 https 访问;
将以上所有修改后的程序保留备份;发布升级公告并关闭论坛;重复以上步骤;修改域名解析;开启论坛;
配置 IP 封禁、定时器、日志、自动备份、配置其它 ECS 的 hosts 等;
查看搜索引擎中收录的地址,是否有无法访问的情况;
尝试将历史遗留的本地附件全部转移到 OSS;
建议 在新服上创建 3 个网站:
第 1 个用来尝试迁移、升级、二开,并测试所有功能;
第 2 个用来再次重复这些步骤,最终保留程序代码及 UGC 文件,作为最终的网站程序,以正式域名作为网站根目录路径;
第 3 个用来正式升级,主要功能是升级最新数据库。完成后修改第 2 个网站的数据库连接指向到最新的数据库,差异化同步新增的 UGC 文件到第 2 个网站。
Discuz! X 升级步骤及注意点:
因 PolarDB MySQL 不支持压缩,所以应移除 Discuz! 和 UCenter 代码中所有的 MYSQLI_CLIENT_COMPRESS,将 , MYSQLI_CLIENT_COMPRESS 替换为 /*, MYSQLI_CLIENT_COMPRESS*/。
升级前务必先修改 ./config/ 目录下的数据库/缓存连接信息,以防出现新站连接老库的情况;
按官方文档进行升级,升级前先修改一下:
【UC】先升级 UCenter 1.6 至 1.7。
将 /uc_server/data 权限改为 777 并递归。
打开 update_ucenter_adult.php 修改 $limit 值为 10000 以免执行超时。
因通信失败的“发送通知失败”可以直接改 URL 参数跳过就完成了,原因可能是因数据量大,发送改名通知执行改名时超时。等DZ升级完成后UC会自动重试改名通知,或单独写个 php 文件将 UCenter 的用户名同步到应用的数据库。
【DZ】运行到 /install/update_adult.php?step=innodb&table=pre_common_member_grouppm 时报错:Duplicate key name 'gpmid' ALTER TABLE common_member_grouppm ADD INDEX gpmid(gpmid);
解决方法:先删除索引,因保存时提示失败,应同时取消 gpmid 字段的自增,转换成功后再设置自增。
【DZ】运行到 /install/update_adult.php?step=file 一片空白而停止
正在解决
【问题】common_menber 表用户名字段编码转换失败
原因是部分用户名包含特殊字符(如全角空格),用以下语句查看两个表同一 uid 的不同用户:
SELECT u.uid, u.username AS ucenter_username, c.username AS common_username FROM pre_ucenter_members u JOIN pre_common_member c ON u.uid = c.uid WHERE u.username <> c.username
Discuz! 用户登录都是以 UCenter 中的用户名为主,所以可以写个小程序直接将 pre_ucenter_members 的用户名同步到 pre_common_member 中,另外 pre_ucenter_members 的用户数少于 pre_common_member 是正常的。若 pre_common_member_archive 表遇到错误同理。
如果用户登录慢,或打开 UCenter 慢,是因为 UC 正在通知 DZ 改用户名,每次打开一个页面会更改一个用户名,具体可以查看 pre_ucenter_notelist 中 closed 为 0 的队列,或进入 UC 后台-数据列表-通知列表 查看。
【问题】发布主题遇到错误:(1062) Duplicate entry '*' for key 'pid'
【原因】forum_post 中的 pid 不是自动增长的,而是由表 forum_post_tableid 中自动增长的 pid 生成的。如果生成的 pid 值已在 forum_post 表中存在,则会出现此错误。
【解决】迁移数据库时应关闭论坛,以防止 forum_post 表有新数据插入。
【问题】打开帖子页面 ./thread-***-1-1.html 显示 404 Not Found,而 ./forum.php?mod=viewthread&tid=*** 可以正常打开
【原因】未配置伪静态(可在宝塔面板中选择)
【问题】打开 UCenter 时报错:UCenter info: MySQL Query Error SQL:SELECT value FROM [Table]vars WHERE name='noteexists'
【解决】打开文件 ./uc_server/data/config.inc.php 配置数据库连接
【问题】打开登录 UCenter 后一片空白
【解决】将目录 ./uc_server/data/ 设为可写
需要将原来安装的插件文件移回 ./source/plugin/ 目录,并设置可写;
界面-表情管理,界面-编辑器设置-Discuz!代码
后续 Discuz! X3.5 小版本升级注意事项:
确认插件是否支持新版本(如短信通)
先创建一个新网站测试二开代码
保留 /config/、/data/、/uc_client/data/、/uc_server/data/、/source/plugin/,其它移入 old
上传文件
移回其它需要的文件,如:
-- 勋章/loading/logo/nv 等:/static/image/common/
-- 表情:/static/image/smiley/
-- 水印:/static/image/common/watermark.*
-- 风格:/template/default/style/t2/nv.png 等
-- 默认头像:/uc_server/images/noavatar_***.gif
-- 根目录 favicon.ico 等
-- 及其它非 DZ 文件
再次检查可写目录的写入权限和禁止运行 PHP 效果。
本文基于 manifest v3
插件使用 Web 技术开发
浏览器提供额外的插件 API
插件与网页分离,运行在一个独立的环境中
插件 API 功能
管理 Tabs、窗口、历史记录、书签、Cookies、下载、浏览数据、通知、网站权限
管理浏览器的外观和感觉 - 背景、主题、右键菜单、新标签页、启动页面
定制 DevTools
向网页注入脚本,与网页通信,与系统中的 Native 应用程序通信
修改/监听发送的 HTTP 请求/接收的回复
插件构成
结构 | 功能 | 调用 API | 操作 Dom | 进程 |
manifest | 配置文件 | - | ||
popup | 弹出对话框 | 所有 | Extension process | |
option page | 用户使用的设置页面 | 所有 | ||
background script | 后台脚本 | 所有 | 禁止? | Extension process |
content script | 内容脚本(注入到网页中) | 有限 | 允许 | Renderer process |
* 即便 content script 是注入到网页中的,而且是运行在 Renderer 进程(与主网页相同的进程),但是它们仍运行在不同的世界(world)。主网页运行在 main world,插件的 content script 运行在 isolated world。比如说 main world 中有一个变量,它在 isolated world 中是访问不到的,但是如果修改了 dom,对其它世界是有影响的。
将 Chrome 插件迁移到 Edge
移除 Chrome 独有的 API(如调用 Google 账户)
移动 update_URL 字段(如果是从 Chrome 商店直接下载的包会有这个字段)
改名 Chrome 相关的文字(插件名称、描述文字)
参考文献
本文由 ChatGTP 3.5 提供
在 .NET C# 桌面应用程序中,你可以使用委托和事件来实现在窗体页面处理事务过程中实时更新界面。下面是一个示例,展示了在不同情况下如何更新主界面:
首先,在窗体页面中定义一个委托和一个事件,用于更新界面:
public delegate void UpdateUIHandler(string msg);
public event UpdateUIHandler UpdateUIEvent;
然后,在窗体的构造函数中订阅事件,并在事件处理程序中更新界面:
public Form1()
{
InitializeComponent();
UpdateUIEvent += UpdateUI;
}
private void UpdateUI(string msg)
{
if (InvokeRequired)
{
Invoke(new UpdateUIHandler(UpdateUI), msg);
}
else
{
// 在这里更新界面
label1.Text = msg;
}
}
现在,你可以在窗体页面的任何地方调用 UpdateUIEvent
来触发更新界面的事件。例如,在按钮点击事件中:
private void button1_Click(object sender, EventArgs e)
{
// 处理事务过程中实时更新界面
string msg = "处理事务中...";
UpdateUIEvent?.Invoke(msg);
// 异步调用一个类方法中的方法,并在方法内部实时更新主界面
Task.Run(() =>
{
MyClass myClass = new MyClass();
myClass.LongRunningMethod(UpdateUIEvent);
});
}
在上面的示例中,MyClass
是一个自定义的类,其中的 LongRunningMethod
是一个耗时的方法。在这个方法内部,你可以通过传递 UpdateUIEvent
来实时更新主界面:
public class MyClass
{
public void LongRunningMethod(UpdateUIHandler updateUI)
{
// 处理事务过程中实时更新界面
string msg = "处理事务中...";
updateUI?.Invoke(msg);
// 其他耗时操作...
}
}
通过以上示例,你可以在窗体页面处理事务过程中实时更新界面,并且在异步调用的方法内部也能实时更新主界面。记得在更新界面时使用 Invoke
方法,以确保在主线程上更新界面,避免跨线程访问 UI 的问题。
客户端:Failed to connect to host.
服务端:无任何日志
原因:可能是域名、IP 或端口有误,或端口未开放。
客户端/服务端:530 Login incorrect.
原因:用户名或密码错误。
客户端/服务端:503 Use AUTH first.
原因:服务端开启了 FTPS 协议(FTP over TLS),且禁止了 FTP 协议(plain FTP)。
解决方法:不建议服务端恢复不安全的 FTP 协议,客户端应配置 client.Config 的 EncryptionMode、DataConnectionEncryption、SslProtocols、ValidateCertificate 等参数。
客户端/服务端:530 This server does not allow plain FTP. You have to use FTP over TLS.
原因:服务端启用了 FTPS。
解决方法:给 client.Config.EncryptionMode 正确的赋值(FtpEncryptionMode.Explicit 或 FtpEncryptionMode.Auto)。
服务端:[Error] TLS session of data connection not resumed.
原因:证书版本有误。
解决方法:给 client.Config.SslProtocols 赋值正确的 TLS 版本。
服务端:521 PROT P required
原因:服务端开启了“Require TLS session resumption on data connection when using PROT P”
解决方法:client.Config.DataConnectionEncryption = true;
客户端/服务端:450 TLS session of data connection has not resumed or the session does not match the control connection
原因:TLS 与控制连接不匹配,即服务端开启了“Require TLS session resumption on data connection when using PROT P”
解决方法:我暂时还不知道原因,临时关闭了“Require TLS session resumption on data connection when using PROT P”(不建议)。该问题出现在 FileZilla Server 0.x 版本,在 1.x 版本中没有该配置选项。
anichart.js 是一款将数据转化为动态柱状图/线性图的 js/ts 工具,可导出视频。
github: https://github.com/Jannchie/anichart.js
中文使用指南:https://github.com/Jannchie/anichart.js/blob/main/README-CN.md
docs 目录中有更详细的使用方法(英文)。
在线演示:https://xoyozo.net/Demo/BarGraph
目前 release 版本 3.0.0。
这里有一点常用设置示例:https://codesandbox.io/s/anichart-2x-m3xbz?file=/main.js
设置画布尺寸
stage.canvas.width = 1000;
stage.canvas.height = 500;
重设尺寸不会重新计算内部元素的大小和位置,因此对响应式布局不太友好。
配置柱状图
示例:
const barChart = new ani.BarChart({
dy: 2, // 文字下沉
imageField: 'logo', // 图标字段名
itemCount: 16, // 最多显示条数
dateFormat: '%Y年%-m月', // 日期格式
barGap: 10, // 柱条间距
barInfoFormat: () => '', // 隐藏柱条上的文字
});
stage.addChild(barChart);
循环播放
setInterval(function () {
if (!stage.playing) {
stage.sec = 0;
stage.play();
}
}, 1000);
从 2023 年 4 月的 22621.1635 版本起,Windows 11 支持在任务栏上显示“秒”。
需要安装 KB5025305 更新,家庭版从 Microsoft®Update Catalog 手动安装,其它版本直接在 Windows Update 中更新补丁。
然后只需在注册表中添加一个配置项即可,位置:
\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced
新建 DWORD (32 位)值,名称为:ShowSecondsInSystemClock
,把值改为 1
。
本文将详细介绍 stable diffusion webui 的下载、安装及问题解决。
Stable Diffusion 是 2022 年发布的深度学习文本到图像生成模型。它主要用于根据文本的描述产生详细图像,尽管它也可以应用于其他任务,如内补绘制、外补绘制,以及在提示词(英语)指导下产生图生图的翻译。它是一种潜在扩散模型,由慕尼黑大学的 CompVis 研究团体开发的各种生成性人工神经网络。它是由初创公司 StabilityAI,CompVis 与 Runway 合作开发的,并得到 EleutherAI 和 LAION 的支持。
其它问题请参考:
运行使用时问题《Windows 使用 Stable Diffusion 时遇到的各种问题整理》;
模型运用及参数《Stable Diffusion 个人推荐的各种模型及设置参数、扩展应用等合集》;
提示词生图咒语《Stable Diffusion 提示词词缀使用指南(Prompt)》;
不同类的模型Models说明《解析不同种类的 Stable Diffusion 模型 Models》;
绘制人物动作及手脚细节《Stable Diffusion 准确绘制人物动作及手脚细节(需 ControlNet 扩展)》;
各种风格对比及实际运用《AI绘图风格对照表/画风样稿详细研究记录及经验总结》;
一、环境准备
(一)硬件方面:
1. 显存
4G 起步,4G 显存支持生成 512*512 大小图片,超过这个大小将卡爆失败。
2. 硬盘
10G 起步,模型基本都在 5G 以上,有个 30G 硬盘不为过吧?现在硬盘容量应该不是个问题。
(二)软件方面:
1. Git
https://git-scm.com/download/win
下载最新版即可,对版本没有要求。
2. Python
https://www.python.org/downloads/
截止发稿(2023.3.6)时,最高版本只能用 3.10.*
,用 3.11.*
会出问题。
3. Nvidia CUDA
https://developer.download.nvidia.cn/compute/cuda/11.7.1/local_installers/cuda_11.7.1_516.94_windows.exe
版本 11.7.1,搭配 Nvidia 驱动 516.94,可使用最新版。
4. stable-diffusion-webui
https://github.com/AUTOMATIC1111/stable-diffusion-webui
核心部件当然用最新版本~~但注意上面三个的版本的兼容性。
5. 中文语言包
https://github.com/VinsonLaro/stable-diffusion-webui-chinese
下载 chinese-all-0306.json
和 chinese-english-0306.json
文件
6. 扩展(可选)
https://github.com/Mikubill/sd-webui-controlnet
下载整个 sd-webui-controlnet
压缩包
https://huggingface.co/Hetaneko/Controlnet-models/tree/main/controlnet_safetensors
https://huggingface.co/lllyasviel/ControlNet/tree/main/models
https://huggingface.co/TencentARC/T2I-Adapter/tree/main
试用时先下载第一个链接中的 control_openpose.safetensors
或 第二个链接中的 control_sd15_openpose.pth
文件
7. 模型
https://huggingface.co/models
https://civitai.com
可以网上去找推荐的一些模型,一般后缀名为 ckpt
、pt
、pth
、safetensors
,有时也会附带 VAE(.vae.pt
)或配置文件(.yaml
)。
类型 | 文件格式 | 存放目录 | 备注 |
---|---|---|---|
check point | .ckpt,.safetensors | \models\Stable-diffusion | 文件较大 |
vae | 名字带有 vae 的 | \models\vae | 细节更好地恢复,特别是眼睛和文字 |
Textual Inversion | *.pt | \embeddings | 一般文件很小,额外的 tag |
Lora | *.pt | \models\Lora | 调整模型,理解为风格化也可以 |
Hypernetworks | .pt,.ckpt,*.safetensors | \models\hypernetworks | 和 lora 工作方式相似,算法不同 |
这里可以学习一下模型的基本概念《解析不同种类的 Stable Diffusion 模型 Models,再也不用担心该用什么了》
二、安装流程
1. 安装 Git
就正常安装,无问题。
2. 安装 Python
建议安装在非 program files
、非 C 盘
目录,以防出现目录权限问题。
注意安装时勾选 Add Python to PATH
,这样可以在安装时自动加入 windows 环境变量 PATH 所需的 Python 路径。
3. 安装 Nvidia CUDA
正常安装,无问题。
4. 安装 stable-diffusion-webui
国内需要用到代理和镜像,请按照下面的步骤操作:
a) 编辑根目录下 launch.py
文件
将 https://github.com
替换为 https://ghproxy.com/https://github.com
,即使用 Ghproxy 代理,加速国内 Git。
如图将代码中所有类似地址都改掉(注意:不仅仅是图中所展示的这些)。
b) 执行根目录下 webui.bat
文件
根目录下将生成 tmp
和 venv
目录。
c) 编辑 venv
目录下 pyvenv.cfg
文件
将 include-system-site-packages = false
改为 include-system-site-packages = true
。
d) 配置 python 库管理器 pip
方便起见,在 \venv\Scripts
下打开 cmd
后执行如下命令:
pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ # 镜像
pip freeze > requirements_versions.txt # 创建文件
pip install -r requirements_versions.txt # 执行此条命令前,请检查你的剩余磁盘空间
pip install xformer # 如果不执行此条命令,启动 Stable Diffusion 时可能会出现错误。xformer 还可以在后续使用中降低显卡占用。
xformer
会安装到 \venv\Lib\site-packages
中,安装失败可以用 pip install -U xformers
命试试。
e) 安装语言包
将文件 chinese-all-0306.json
和 chinese-english-0306.json
放到目录 \localizations
目录中。
运行 webui
后进行配置,操作方法见下。
f) 安装扩展(可选)
将 sd-webui-controlnet
解压缩到 \extensions
目录中。
将 control_sd15_openpose.pth
文件复制到 /extensions/sd-webui-controlnet/models
目录中。
不同的扩展可能还需要安装对应的系统,比如 controlnet
要正常使用则还需要安装 ffmpeg
等。
g) 安装模型
下载的各种模型放在 \models\Stable-diffusion
目录中即可。
h) 再次执行根目录下 webui.bat
文件
用浏览器打开 webui.bat
所提供的网址即可运行。
其中提供了网址:http://127.0.0.1:7860
。
打开该网址后在 Settings
-> User interface
-> Localization (requires restart)
设置语言,在菜单中选择 chinese-all-0220
(前提是已经在目录中放入了对应语言包,见上),点击 Apply Settings
确定,并且点击 Reload UI
重启界面后即可。
好了,现在可以开始使用了~~
三、问题及注意点
1. python 版本错误
错误:
ERROR: Could not find a version that satisfies the requirement torch==1.13.1+cu117
ERROR: No matching distribution found for torch==1.13.1+cu117
这是由于 python 版本不对导致的(上面提过了,截止发稿时不能追求新版本),要用 python 3.10.*
版本。
解决来源:https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/7166
2. pip版本错误
警告:
[notice] A new release of pip available: 22.3.1 -> 23.0.1
[notice] To update, run: D:\stable-diffusion-webui\venv\Scripts\python.exe -m pip install --upgrade pip
提示中已经给出了解决方案:
在 \venv\Scripts\
目录中打开 cmd
,执行
python.exe -m pip install --upgrade pip
3. 安装或执行停滞
如果在执行 webui.bat
进行包下载安装时或者生成图片时会卡很久都没反应,那么这时可以复制包名,进入 python 安装目录
或 \venv\Scripts\
目录中打开 cmd
,执行
pip install 包名
也可以通过任务管理查看网络状态,如果网络在玩命下载,那么就等着吧~~
4. xFormers 安装不上
很多同学都反应 xformers 无法安装,可以用以下的方法试试:
检查 Dreambooth 要求的 Python 版本:
如果您的 Python 版本低于 3.6,请安装最新的 Python 版本,并重复尝试安装 xformers。
# 据此可以在终端中运行以下命令,以检查您的 Python 版本:
python --version
安装依赖项:xformers 有许多依赖项,如果这些依赖项没有正确安装可能会导致升级失败。您可以尝试安装以下依赖项:
pip install numpy scipy torch torchaudio transformers
清除 pip 缓存并重新安装:
# 清除 xformers 缓存:运行以下命令清除 xformers 缓存。
pip uninstall -y xformers
pip cache purge
# 更新 pip:确保您正在使用最新版本的 pip,可以运行以下命令更新 pip。
pip install --upgrade pip
# 安装 xformers:在清除了缓存并更新了 pip 之后,重新安装 xformers。
pip install xformers
手动安装 xformers 指定版本
如果上述步骤仍然无法解决问题,可尝试手动安装 Dreambooth 所需的 xformers 版本。在 Dreambooth 的文档中,可以找到 xformers 的版本要求。
pip install xformers==0.0.17.dev465
使用 conda 环境
如果您使用的是 conda 环境,请尝试在 conda 环境中安装 xformers。
# 创建 conda 环境
conda create --name myenv
# 激活 conda 环境并安装 xformers
conda activate myenv
pip install xformers
网络问题
如果已经配置好了代理,就不要考虑这个了。
检查网络连接:请确保您的计算机与互联网连接,并且网络连接没有被防火墙或代理服务器阻止:
# 检查网络连接是否正常
ping google.com
非必要
你确定需要使用 xformers 么?如果不需要,可以在webui-user.bat
中把--xformers
去掉试试。其它
如果上述方法还是无法解决问题,请尝试在 OpenAI 的论坛或者 Dreambooth 的 GitHub 页面上寻求更多帮助。-_-!
5. 其他安装问题
删除 /tmp
和 /venv
目录后重启 webui.bat
试试。
6. 硬件问题
一般显卡不达标,就会爆卡,解决办法就是编辑根目录下 webui-user.bat
文件,试一下修改参数 COMMANDLINE_ARGS
即可。
以下几个设置逐一测试看看哪个适合自己。
set COMMANDLINE_ARGS=--lowvram --precision full --no-half --skip-torch-cuda-test
set COMMANDLINE_ARGS=--lowvram --precision full --no-half
set COMMANDLINE_ARGS=--lowvram
本机显存 4G,使用最后一个配置方法,可以烧出 2048*1080 的图,前两种方法反而会在最后爆卡。
最后,预祝各位成功~~
dog drink~~ where is dog?
参考:
【AI 繪畫】Stable-Diffusion 通過骨架分析插件 ControlNet 來製作超有意境的圖片
Stable Diffusion 2.1 + WebUI 的安装与使用(极详细)
低配显卡想玩 Stable Diffusion?修改一个配置就行
整合包
不知道从哪个版本的 Chrome 或 Edge 开始,我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中,我们想办法用 JS 来实现。
方式一、监听 paste 事件:
const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
input.value = event.clipboardData.getData('text');
});
这段代码实现了从页面获取这个 input 元素,监听它的 paste 事件,然后将粘贴板的文本内容赋值给 input。
经测试,当焦点在“年”的位置时可以粘贴成功,但焦点在“月”或“日”上不会触发 paste 事件。
方式二、监听 keydown 事件:
const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
event.preventDefault();
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
input.value = clipboardData.getData('text');
}
});
测试发现报错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'getData')
Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')
看来 event 中没有 clipboardData 对象,改为从 window.navigator 获取:
const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
event.preventDefault();
window.navigator.clipboard.readText().then(text => {
input.value = text;
});
}
});
缺点是需要用户授权:
仅第一次需要授权,如果用户拒绝,那么以后就默认拒绝了。
以上两种方式各有优缺点,选择一种适合你的方案就行。接下来继续完善。
兼容更多时间格式,并调整时区
<input type="date" /> 默认的日期格式是 yyyy-MM-dd,如果要兼容 yyyy-M-d 等格式,那么:
const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}
以 text 为“2023-4-20”举例,先转为 Date,如果成功,再转为英国时间格式“20-04-2023”,以“/”分隔,逆序,再以“-”连接,就变成了“2023-04-20”。
当然如果希望支持中文的年月日,可以先用正则表达式替换一下:
text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");
处理页面上的所有 <input type="date" />
const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
input.addEventListener(...);
});
封装为独立域
避免全局变量污染,使用 IIFE 函数表达式:
(function() {
// 将代码放在这里
})();
或者封装为函数,在 jQuery 的 ready 中,或 Vue 的 mounted 中调用。
在 Vue 中使用
如果将粘贴板的值直接赋值到 input.value,在 Vue 中是不能同步更新 v-model 绑定的变量的,所以需要直接赋值给变量:
<div id="app">
<input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
{{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
a: null,
}
},
methods: {
fn_pasteToDateInput: function (event) {
const text = event.clipboardData.getData('text');
const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
const att = event.target.getAttribute('data-model');
this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}
},
}
});
const vm = app.mount('#app');
</script>
示例中 <input /> 添加了 data- 属性,值同 v-model,并使用 getAttribute() 获取,利用 this 对象的属性名赋值。
如果你的 a 中还有嵌套对象 b,那么 data- 属性填写 a.b,方法中以“.”分割逐级查找对象并赋值
let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text);
外星人笔记本电脑键盘突然失灵(我的是 m15 R6),尝试过重启电脑、长按电源键(强制关机、切换电脑性能)、卸载键盘驱动、BIOS 恢复默认设置都没有效果。多次尝试后恢复正常,总结经验:
办法一:关机、拔掉电源、插上电源、再开机,就能恢复正常。
办法二:长按电源键直到关机成功,长按电源键直至开机完成。
若无效,强制关机、插拔电源,多试几次。
总之,这电脑不用的时候尽量关机,直接合上盖子会出现自动苏醒、键盘失灵等一系列问题。
2023年9月补充,最近发现直接合上盖子没有出现自动苏醒,先睡眠再拔电源也没有出现苏醒,可能与我经常在 Alienware Update 和 SupportAssist 中更新驱动和固件有关。
2024年6月补充,出现键盘失灵可以试试合上盖子再打开,大概率能恢复。