如何向带有readonly属性的input元素赋值？

核心原理 #

readonly 属性仅限制用户通过界面交互修改输入框内容，JavaScript 可以直接修改元素的 value 属性，无需移除该属性。

方法一：直接修改value属性（推荐） #

通过原生JS定位到目标元素后，直接赋值即可：

// 通过name属性定位元素（适配你提供的DOM结构）
const input = document.querySelector('input[name="pf_filename_0"]');
// 设置目标值
input.value = "需要填入的内容";

方法二：移除readonly后修改（按需使用） #

如果需要触发onchange等依赖元素状态的事件，可以先移除readonly属性，修改值后再恢复：

const input = document.querySelector('input[name="pf_filename_0"]');
// 移除readonly属性
input.removeAttribute('readonly');
// 设置值
input.value = "新的内容";
// 重新添加readonly属性
input.setAttribute('readonly', '');
// 手动触发change事件（可选，根据业务需求）
input.dispatchEvent(new Event('change'));

你提供的目标元素代码 #

<input type="text" name="pf_filename_0" size="57" maxlength="255" value="" class="d-pr-calc-files-maint85073" tabindex="3" style="position:absolute; left:0.875in; top:0.427in; width:3.792in;" readonly="" onfocus="{d_pr_calc_files_maint.itemGainFocus(0,6,this,d_pr_calc_files_maint.gobs.pf_filename); d_pr_calc_files_maint.selectControlContent(this);}" onclick="{var ret;  ret= d_pr_calc_files_maint.itemClicked(0,6,'pf_filename',0); return ret;}" onchange="{this.bChanged = true;}" onkeypress="return DW_EditKeyPressed(event, this, -1);" onblur="{d_pr_calc_files_maint.itemLoseFocus (this);}">

<input type="text" name="pf_filename_0" size="57" maxlength="255" value="" class="d-pr-calc-files-maint85073" tabindex="3" style="position:absolute; left:0.875in; top:0.427in; width:3.792in;" readonly="" onfocus="{d_pr_calc_files_maint.itemGainFocus(0,6,this,d_pr_calc_files_maint.gobs.pf_filename); d_pr_calc_files_maint.selectControlContent(this);}" onclick="{var ret;  ret= d_pr_calc_files_maint.itemClicked(0,6,'pf_filename',0); return ret;}" onchange="{this.bChanged = true;}" onkeypress="return DW_EditKeyPressed(event, this, -1);" onblur="{d_pr_calc_files_maint.itemLoseFocus (this);}">

内容的提问来源于stack exchange，提问作者Dileep K