在文本框里填充颜色 在文本框里面怎么设置文字

本文档旨在指导开发者如何在HTML文本框内创建和控制同心圆，并解决输入值改变后表单大小不更新的问题。通过CSS的定位方式，将修改定位在文本框内，并使用JavaScript动态调整表单大小。同时，本文档还提供了一种限制输入值大小，进而用户显示错误提示的方法，确保表单不会超出屏幕范围。1. HTML结构

首先，我们需要一个包含标题、输入框和用于不同托盘的容器的HTML结构。lt；div class=quot；wrapperquot；gt；lt；div class=quot；titlequot；gt；lt；h1gt；Cutter Calculatorlt；/h1gt；lt；/divgt；lt；div class=quot；计算quot；gt；lt；input type=quot；numberquot； id=”outer_diameter”；占位符=”；输入外径”；gt；lt；brgt；lt；输入类型=”；数字”；id=”；内径”；占位符=”；输入厚度”；gt；lt；brgt；lt；输入类型=”；按钮”；id=”；bttn”；名称=”；计算”；值=”；计算”；gt； lt；/divgt； lt；div class=quot；圆quot；gt； lt；span class=quot；circlequot；gt；lt；/spangt； lt；span class=quot；circle2quot；gt；lt；/spangt； lt；/divgt；lt；/divgt；登录后复制2. CSS样式

关键了对.circles容器的定位方式和托盘的定位方式。我们需要将.circles设置为position：relative，而将.circle和.circle2设置为position：absolute。这样，托盘就会相对于.circles容器进行定位，而不是整个页面。

.wrapper { 高度： 400px； 宽度： 100； 显示方式： flex； 对齐项： center； 对齐内容： center； flex-direction： column；}.circles { 顶部边距： 15px； 位置： relative；}.circle { 显示方式： inline-block； 边框半径： 50； 边框样式： solid； 边框宽度： 2px； 边框颜色： blue； 背景颜色： rgba(0， 0， 0， 0)； z-index： -1； 左侧： 50； 顶部： 50； 位置： absolute；}.circle2 { 显示方式： inline-block； 位置： absolute； 边框半径： 50； 边框样式： solid； 边框宽度： 2px； 边框颜色： red； 背景颜色： rgba(0， 0， 0， 0)； z-index： -1； 左侧： 50； 顶部： 50；}登录后复制3. JavaScript代码

使用jQuery监听输入框的change事件，当输入值改变时，动态调整托盘的大小。同时，我们还需要动态调整.circles容器的大小，以适应托盘的大小。

$(function() { $('.circle').hide()； $('#outer_diameter').on('change'， function() { var $outer_diameter = parseFloat($(quot；#outer_diameterquot；).val()).toFixed(3)； var $converted = ($outer_diameter * 10).toFixed(3)； console.log($outer_diameter， $converted)； $('.circle').css({ 高度： (2 * $converted)， 宽度： (2 * $converted)， 顶部： quot；calc(50 - quot； ($converted) quot；px)quot；， 左侧： quot；calc(50 - quot； ($converted) quot；px)quot； })； $('.circle').fadeIn(300)； $('.circles').css({ 高度：(2 * $converted) 10， 宽度： (2 * $converted) 10}) $('#error').hide()； }) $('.circle2').hide()； $('#inner_diameter').on('change'， function() { var $outer_diameter = parseFloat($(quot；#outer_diameterquot；).val()).toFixed(3)； var $inner_diameter = parseFloat($(quot；#inner_diameterquot；).val()).toFixed(3)； var $converted_2 = (($outer_diameter * 10) - ($inner_diameter * 10)).toFixed(3)； console.log($inner_diameter， $converted_2)； $('.circle2').css({ 高度： (2 * $converted_2)， 宽度： (2 * $converted_2)， top： quot；calc(50 - quot； ($converted_2) quot；px)quot；， left： quot；calc(50 - quot； ($converted_2) quot；px)quot； })； $('.circle2').fadeIn(300)； })})；登录后复制

代码解释：$('.circle').hide()；：页面加载时隐藏请求。$('#outer_diameter').on('change'， function() { ... })；：监听outer_diameter输入框的change事件。

当输入框的值改变时，执行回调函数。parseFloat($("#outer_diameter").val()).toFixed(3)；：获取输入框的值，转换为浮点数，并保留三个小数。$('.circle').css({ ... })；：设置.circle元素的CSS属性，包括高度、宽度、top和left。$('.circle').fadeIn(300)；：以300毫秒的淡入效果显示.circle元素。$('.circles').css({height：(2 * $converted) 10， width：(2 * $converted) 10})：设置包含货物的高度和宽度，保证容器能够包含住货物。$('#inner_diameter').on('change'， function() { ... })；：监听inner_diameter输入框的change事件，逻辑与outer_diameter类似。4. 限制输入值大小

为了防止用户输入过大的值导致超出屏幕范围，可以添加一个条件判断，限制输入值的范围。$('#outer_diameter').on('change'， function() { var $outer_diameter = parseFloat($(quot；#outer_diameterquot；).val()).toFixed(3)； if ($outer_diameter gt；= 85) { alert(quot；外径太大quot；)； // 或者显示错误信息 // $('#error').text(quot；外径太大quot；).show()； return； } var $converted = ($outer_diameter * 10).toFixed(3)； console.log($outer_diameter， $converted)； $('.circle').css({ height： (2 * $converted)， 宽度： (2 * $converted)， 顶部： quot；calc(50 - quot； ($converted) quot；px)quot；，左： quot；calc(50 - quot；($converted) quot；px)quot； })； $('.circle').fadeIn(300)； $('.circles').css({高度：(2 * $converted) 10，宽度： (2 * $converted) 10}) $('#error').hide()；})登录后复制

代码解释：if ($outer_diameter gt；= 85) { ... }：如果输入值大于等于85，则显示一个警告框，并阻止后续代码的执行。alert("Outer Diameter Too big")；：显示一个警告框，提示用户输入的值过大。return；：阻止后续代码的执行。

5.解决Formidable Forms计算后表单大小不更新的问题

如果使用了Formidable Forms，并且计算后的值立即更新表单的大小，可能是因为Formidable Forms的计算过程没有触发change事件。我们需要手动触发change事件，直接或者在Formidable Forms的回调函数中更新表单的大小没有。文心大模型

百度飞桨-文心大模型 ERNIE 3.0 理解文本与创作56 查看详情

方法一：手动触发change事件

在Formidable Forms的计算完成后，手动触发outer_diameter和inner_diameter输入框的change事件。//假设Formidable Forms计算完成后会执行这个函数function formidableFormsCalculationComplete() { $('#outer_diameter').trigger('change')； $('#inner_diameter').trigger('change')；}登录后复制

方法二：在Formidable Forms的回调函数中更新订单大小

找到Formidable Forms的计算后的回调函数，直接在回调函数中更新订单的大小。这需要你熟悉Formidable表单的API和事件机制。

总结：

通过以上步骤，我们可以在文本框内创建和控制同心圆，并解决输入值改变后请求大小不更新的问题方式。关键在于CSS的定位和JavaScript的动态调整。同时，我们还提供了一种限制输入值大小，以及用户显示错误提示的方法，保证请求不会超出屏幕范围。对于Formidable Forms计算后请求大小不更新的问题，可以通过手动触发改变事件直接在Formidable表单的回调函数中更新发票的大小来解决。

以上就是在文本框内设置同心圆的详细，更多请关注乐哥常识网相关！ 相关标签： css javascript java jquery html app 回调函数文章 css 属性 red JavaScript jquery css html if 悬停回调函数函数 事件提醒位置 大家都在看：CSS Transform和Transition实现元素平滑使用缩放动画 高亮鼠标停元素的所有同类 CSS 类元素 解决 Angular CDK 虚拟滚动与 CSS滚动控件冲突导致的触发问题 JavaScript与CSS：为元素缩放添加平滑动画解决Bootstrap Nav-Tab样式错误：CSS选择器控件与正确的实践