文本框内同心圆环布局及功能优化技术咨询

一、圆环限制在文本框内（替换fixed布局） #

原position: fixed布局会脱离文档流，不受文本框约束，改用相对+绝对定位嵌套实现：

• 给文本框所在容器添加position: relative，作为圆环的定位参考容器
• 圆环容器设置position: absolute; top: 0; left: 0; width: 100%; height: 100%;，强制圆环被限制在容器范围内
• 计算圆环尺寸时，取容器宽高中的较小值作为最大直径上限，避免超出容器：

const container = document.getElementById('textbox-container'); // 替换为你的容器ID
const maxAvailableSize = Math.min(container.offsetWidth, container.offsetHeight);
// 计算内外半径时，强制不超过容器最大可用尺寸的一半
const outerRadius = Math.min(outerDiameter / 2, maxAvailableSize / 2);
const innerRadius = Math.min(innerDiameter / 2, maxAvailableSize / 2);

二、外径≥85的提示功能 #

给外径输入框绑定输入事件监听，实时校验值：

const outerInput = document.getElementById('pipe-od-input'); // 替换为实际输入框ID
outerInput.addEventListener('input', function() {
  const inputValue = parseFloat(this.value);
  if (!isNaN(inputValue) && inputValue >= 85) {
    alert('Too big');
    // 可选：自动重置为合规最大值
    this.value = 84;
    // 同步更新圆环尺寸
    updateRingDisplay();
  }
});

三、Formidable Forms计算后圆环不更新的原因及解决方法 #

原因 #

Formidable Forms的计算按钮仅更新表单字段的DOM值，但未触发圆环尺寸更新的关联事件（如input/change），导致更新逻辑未执行。

解决方法 #

1. 监听Formidable内置计算完成事件：利用插件自带的frmAfterCalculate钩子，在计算完成后主动调用圆环更新函数：

document.addEventListener('frmAfterCalculate', function() {
  updateRingDisplay(); // 调用你的圆环尺寸更新函数
});

2. 绑定计算按钮点击事件：若内置钩子失效，直接给计算按钮添加点击监听，延迟执行更新（确保字段值已完成更新）：

const calculateBtn = document.querySelector('.frm_calculate_button');
calculateBtn.addEventListener('click', function() {
  setTimeout(updateRingDisplay, 100); // 100ms延迟确保DOM值已更新
});

3. 确保更新函数读取实时值：更新函数需直接从DOM获取最新输入值，而非依赖缓存变量：

function updateRingDisplay() {
  // 实时读取当前输入框的值
  const outerDiameter = parseFloat(document.getElementById('pipe-od-input').value) || 0;
  const innerDiameter = parseFloat(document.getElementById('pipe-id-input').value) || 0;
  // 后续尺寸计算、圆环渲染逻辑...
}

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