上次发的文章《评论自动填写个人信息》所记方法一直觉得很好用，奈何个别网站用不了，其中就包括自己的博客。没办法换了个折中的法子，用输入法自带的自定义短语功能来加快填写速度。但这个方法也有不少问题，一是昵称、邮箱、网址这三项不少博客不能全部自动填写，总有那么一两项输入法调不出自定义的短语，这种情况在移动端上最为明显。二是操作步骤还是有点多，效率并不怎么高。

今天不死心，鼓捣了好长时间，终于把这个书签脚本自动填写评论信息的方法优化了一下，顺便也把在用的这个主题评论提交方面，自身存在的问题处理掉了，现将相关解决方法记录如下：

书签脚本不能在我的博客发挥作用的解释：

自动填写评论信息书签脚本，是通过直接操作 DOM 将评论表单中的昵称、邮箱和网址字段填写的，在 Vue.js 应用中，表单输入通常使用 v-model 进行数据绑定。当直接通过 JavaScript 修改输入元素的 value 属性时，Vue.js 无法检测到这些更改，因为它依赖于 input 事件来同步数据。

为了让 Vue.js 识别到通过脚本填写的内容，需要在修改输入值后，手动触发 input 事件。这将通知 Vue.js 数据模型已经更新，从而正确地同步数据。

新的评论自动填写个人信息书签脚本解决了这个问题，现记录如下：（使用方法见上篇）

javascript:(function()%7Bvar%20lauthor=%5B%22%23author%22,%22input%5Bname='comname'%5D%22,%22%23inpName%22,%22input%5Bname='author'%5D%22,%22%23ds-dialog-name%22%5D,lmail=%5B%22%23mail%22,%22%23email%22,%22input%5Bname='commail'%5D%22,%22%23inpEmail%22,%22input%5Bname='email'%5D%22,%22%23ds-dialog-email%22%5D,lurl=%5B%22%23url%22,%22input%5Bname='comurl'%5D%22,%22%23inpHomePage%22,%22%23ds-dialog-url%22,%22input%5Bname='url'%5D%22%5D;for(var%20i=0;i%3Clauthor.length;i++)%7Bvar%20author=document.querySelector(lauthor%5Bi%5D);if(author!=null)%7Bauthor.value='沉沦';var%20event=document.createEvent('Event');event.initEvent('input',true,true);author.dispatchEvent(event);break;%7D%7Dfor(var%20j=0;j%3Clmail.length;j++)%7Bvar%20mail=document.querySelector(lmail%5Bj%5D);if(mail!=null)%7Bmail.value='admin@kkn.me';var%20event=document.createEvent('Event');event.initEvent('input',true,true);mail.dispatchEvent(event);break;%7D%7Dfor(var%20k=0;k%3Clurl.length;k++)%7Bvar%20url=document.querySelector(lurl%5Bk%5D);if(url!=null)%7Burl.value='https://kkn.me';var%20event=document.createEvent('Event');event.initEvent('input',true,true);url.dispatchEvent(event);break;%7D%7D%7D)();

现用主题使用此书签脚本存在的问题：

当读者是首次发表评论时，使用书签代码自动填写昵称、邮箱和网址后，昵称和网址会被自动清空。这是因为在这个主题的 CommentForm 组件中，有一段代码会在邮箱字段改变后，自动获取用户信息并更新 this.form.author 和 this.form.url。如果获取到的 author 和 url 为空，就会将书签脚本填写的昵称和网址清空。为了避免昵称和网址被清空，需要在 author 和 url 有值时才更新 this.form.author 和 this.form.url。

另外这个主题本身还存在一个比较明显的问题，就是评论提交时不会正确验证必填项，造成即使你不填写必填的邮箱和昵称信息，提交评论后前端仍然反馈错误的“评论提交成功”提示。

现将这个主题 modules.js 中修改后的整个评论表单代码记录如下：（修改后的代码，可以确保昵称和网址不会在使用上述新的书签脚本后，自动填写的信息被清空。并且修复了评论提交时不会正确验证必填项，避免了提示成功但实际提交失败的情况。）

this.CommentForm = {
    name: 'comment-form',
    template: `
        <form method="post" action id="comment_form" :class="{ 'small-size': reply.id }" @submit="e => e.preventDefault()">
            <div class="form-group w-100">
                <div v-show="!userId" slot="content-top" class="user-info flex-center w-100">
                    <input v-for="(item, index) in inputs" :key="item.key" class="form-input" type="text" v-model="form[item.bind.name]" v-bind="item.bind" :disabled="sending" @input="() => item.event && item.event()" />
                </div>
                <div class="d-flex">
                    <figure class="user-avatar s-rounded">
                        <img class="s-rounded" :src="avatar" :alt="form.author" />
                    </figure>
                    <div class="d-flex flex-wrap w-100">
                        <editor class="w-100" ref="editor" @submit="submit" v-bind="info.editor" />
                    </div>
                </div>
            </div>
        </form>
    `,
    components: { Editor: that.Editor },
    props: {
        info: {
            type: Object, default: () => ({}),
        },
        reply: {
            type: Object, default: () => ({}),
        },
    },
    data() {
        return {
            sending: false,
            inputs: [
                {
                    bind: { name: 'email', placeholder: '邮件', required: true, autocomplete: 'email' },
                    event: $h.debounce(() => {
                        $h.visitor(this.form.email, ({ author, avatar, url }) => {
                            this.avatar = avatar;
                            // 仅在返回的 author 有值且当前 form.author 为空时更新
                            if (!this.form.author && author) {
                                this.form.author = author;
                            }
                            // 仅在返回的 url 有值且当前 form.url 为空时更新
                            if (!this.form.url && url) {
                                this.form.url = url;
                            }
                        });
                    }, 600),
                },
                { bind: { name: 'author', placeholder: '昵称', required: true, autocomplete: 'name' } },
                { bind: { name: 'url', placeholder: '网址', autocomplete: 'url' } },
            ],
            avatar: 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=',
            userId: '',
            form: {
                comment_post_ID: null, comment_parent: null, author: '', email: '', url: '', comment: '',
            },
        };
    },
    watch: {
        info: {
            deep: true,
            immediate: true,
            handler({ post_id, visitor }) {
                this.userId = visitor.user_id;
                if (visitor.email !== this.form.email) {
                    $h.visitor(visitor.email, ({ avatar }) => {
                        this.avatar = avatar;
                    });
                }
                // 修改 this.form 赋值方式，避免覆盖已有的 author 和 url
                this.form = {
                    ...this.form,
                    comment_post_ID: post_id,
                    email: visitor.email || this.form.email,
                    author: this.form.author || visitor.author || '',
                    url: this.form.url || visitor.url || '',
                };
            },
        },
        reply: {
            deep: true,
            immediate: true,
            handler(data) {
                this.form.comment_parent = data.id;
            },
        },
    },
    methods: {
        submit({ content, upload }) {
            if (!content) {
                this.$toast({ type: 'error', message: '请输入评论内容' });
                return;
            }
            // 验证必填字段
            if (!this.userId && (!this.form.author || !this.form.email)) {
                this.$toast({ type: 'error', message: '请填写昵称和邮箱' });
                return;
            }
            this.form.comment = content;
            this.sending = true;
            $h.ajax({
                query: { action: 'submit_comment' },
                data: this.form,
                method: 'POST',
            })
            .then(response => {
                if (response && response.success) {
                    this.$refs.editor.clear();
                    this.$toast({ type: 'success', message: '评论提交成功' });
                    this.$emit('append', response.data);
                } else {
                    const errorMsg = response && response.message ? response.message : '评论提交失败';
                    this.$toast({ type: 'error', message: errorMsg });
                }
            })
            .catch(error => {
                const errorMsg = error && error.message ? error.message : '评论提交失败，请重试';
                this.$toast({ type: 'error', message: errorMsg });
            })
            .finally(() => {
                this.sending = false;
            });
        },
    },
};