Laravel+Inertia+Vue中URL输入框预填https://后无法正常输入问题咨询

问题原因 #

直接设置input原生value属性无法输入的核心原因是：Vue的v-model双向绑定优先级高于原生value属性，你设置的原生value会被v-model绑定的form.website初始空值覆盖，且直接修改原生value不会同步到v-model绑定的变量，因此会出现输入无响应的问题。

实现步骤 #

1. 初始化绑定值预设前缀 #

在定义表单响应式对象时，直接给website字段设置初始值https://即可实现预填效果，示例（Vue3 语法）：

import { reactive } from 'vue'

const form = reactive({
  website: 'https://', // 初始化预设前缀
  hasErrors: false,
  errors: {},
  // 其他表单字段
})

如果表单初始值是从Laravel后端通过Inertia传递的，直接在后端返回props时给website赋值https://即可。

2. 补全输入边界逻辑（可选，推荐） #

为了避免用户误删前缀导致格式错误，可以添加输入事件监听自动补全前缀，修改模板代码：

<div>
  <form-label for="form.website">Website</form-label>
    <form-input
      v-model="form.website"
      id="form.website"
      type="url"
      class="block w-full mt-1"
      placeholder="https://example.com"
      @input="handleWebsiteInput"
      @focus="handleWebsiteFocus"
    />
    <form-input-error
      class="block w-full"
      v-if="form.hasErrors && form.errors['website']"
      :message="form.errors['website']"
    />
  </div>

添加对应的事件处理函数：

// 输入时自动补全前缀
const handleWebsiteInput = (value) => {
  // 移除用户输入的重复http/https前缀后再拼接统一前缀
  const pureDomain = value.replace(/^https?:\/\//, '')
  form.website = 'https://' + pureDomain
}

// 聚焦时光标自动定位到内容末尾，避免选中前缀
const handleWebsiteFocus = (e) => {
  const inputDom = e.target
  const valueLength = form.website.length
  inputDom.setSelectionRange(valueLength, valueLength)
}

3. 后端验证适配（Laravel端） #

提交到后端时，可添加自定义验证规则排除仅保留前缀的无效提交：

$validated = $request->validate([
    'website' => [
        'required',
        'url',
        function ($attribute, $value, $fail) {
            if (trim($value) === 'https://') {
                $fail('请输入完整的网站域名');
            }
        }
    ],
    // 其他字段验证规则
]);

内容的提问来源于stack exchange，提问作者Eric Evans