Bootstrap 5 的 <input type="color"> 元素在用户选择新颜色后，其 value 属性会动态更新，但通过 .attr('value') 只能读取初始 HTML 中声明的静态值；应使用 .val() 方法获取当前实际选中的颜色值。
bootstrap 5 的 `` 元素在用户选择新颜色后，其 `value` 属性会动态更新，但通过 `.attr('value')` 只能读取初始 html 中声明的静态值；应使用 `.val()` 方法获取当前实际选中的颜色值。
在使用 Bootstrap 5 表单控件时，原生 <input type="color"> 是一个轻量、语义化且无需额外插件的颜色选择器。但开发者常误用 jQuery 的 .attr('value') 来读取其值，导致始终返回 HTML 中初始设定的 #563d7c，而非用户最新选择的颜色。
根本原因：
- .attr('value') 读取的是 DOM 元素的 HTML 属性（attribute），它仅反映元素初始化时的静态值；
- .val() 读取的是元素的 当前值（property），由浏览器实时维护，随用户交互自动更新。
✅ 正确做法如下：
<div class="row align-items-center">
<label class="col col-form-label" for="priceColor">Price Color</label>
<div class="col">
<input type="color" class="form-control form-control-color" id="priceColor" value="#563d7c" title="Choose your color">
</div>
</div>$('#priceColor').on('change', function() {
const currentColor = $(this).val(); // ✅ 正确：获取实时选中值
console.log('Selected color:', currentColor); // 例如输出 "#ff6b35"
// 同步更新其他依赖项（如预览区域、表单字段等）
$('#pricePreview').css('background-color', currentColor);
});⚠️ 注意事项：
- change 事件在用户确认选择（关闭拾色器）后触发，适用于表单提交前校验；若需实时响应（如拖动滑块过程），可监听 input 事件（部分浏览器支持）；
- 确保 jQuery 已正确加载，且脚本执行于 DOM 就绪之后（推荐包裹在 $(document).ready(...) 中）；
- 不要混淆 attr('value') 与 prop('value')：虽然 prop('value') 也能获取当前值，但 jQuery 官方推荐对表单控件统一使用 .val() —— 更简洁、跨浏览器兼容性更好、语义更清晰。
总结：对于所有原生表单控件（<input>、<select>、<textarea>），始终优先使用 .val() 获取和设置用户输入的动态值；.attr() 仅用于操作静态 HTML 属性（如 id、data-*、disabled 等）。
