Input中value与显示不一致

最新推荐文章于 2024-08-14 15:20:02 发布
原创 最新推荐文章于 2024-08-14 15:20:02 发布 · 4.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决Ajax回显数据与input中value值不一致的问题，提供了使用reset方法来确保界面显示的数据与实际数据同步的有效方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用ajax回显数据在界面后，发现input中value的值与显示不一致，与第一次回显数据相同，处理方法：reset。
可以用表单中reset按钮，使用js触发，也可以用js方法 $('#edit_form').reset();，JQuey则是 $('#edit_form')[0].reset();
EnTaroAdunZ
关注
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
weixin_44875212的博客
03-21 1986
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
input 按钮在IE下显现不一致的兼容问题
12-13
这段时间在处理网页默认的input 按钮时，IE下常显现不一致的宽度问题，让人感到很纠结。所以今天请教了几位高手把这个问题解决了，现在贴出来和大家共享一下，当然这个方法在网上曾有人写过，大家可以一起来相互探讨...
火狐浏览器input框value与看到的内容不一样的问题
qq_38524629的博客
08-12 1198
在一次开发中，更新红框中的文案，然后跳转controller并刷新页面，跳转之后发现页面上的内容并没有更改，查看元素发现，input的value是改之后的值，网上相关资料很少，询问前端人员得知，火狐浏览器比较特殊，它默认会缓存input框的值，导致页面看到的和value的值不一致，F5刷新多次还是一样，但ctrl+F5强制刷新可以。彻底解决这个问题的办法是给input加一个属性autocompl...
input 的value属性值，页面显示与html结构中不一致的问题
xjun0812的博客
12-19 1万+
input 的value属性值，页面显示与html结构中不一致。
小知识：input标签 id name value 区别？
mumu0729的专栏
10-08 1361
 id是唯一标识符，不允许有重复值(类似数据表的主键)可以通过它的值来获得对应的html标签对象。(如果在同一页面代码中，出现重复的id，会导致不可预料的错误)name：单独地在一个网页里面，一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的。但是，当我们需要把这个控件所关联的数据传递到数据库事，就必须要设置 name 属性，否则，这个值是没有办法传到服务器上面得到保存的。id：...
input框的value明明有值，但是不显示问题
热门推荐
铁柱的博客
12-29 5万+
上午刚碰到的问题。也耽误了不少时间。用浏览器F12查看元素，发现value有值，但是显示的确实placeholder的值。然后注释掉placeholder之后，input框什么都不显示了。一、如图所示      百度一下，都说可能是JS赋值的原因。因为前端页面不是我写的，所以刚开始也没想到这一点。后来和同事一起找问题，才发现问题所在。二、错误原因function loadPage(){ if
把input初始值不写value的具体实现方法
09-05
在网页设计中，有时我们需要将`input`元素的初始值显示出来，但又不希望这个初始值被作为`value`属性写入HTML。这通常是为了避免某些特定的业务需求，例如防止用户在不清空输入框时提交初始值，或者为了实现更复杂的...
layui radio点击事件实现input显示和隐藏的例子
10-16
在本文中，我们将深入探讨如何使用layui框架中的radio组件来实现点击事件，从而控制input元素的显示与隐藏。layui是一个前端UI框架，它提供了一系列的模块和组件，使得前端开发更加方便快捷。在本例中，我们将结合...
HTML中让表单input等文本框为只读不可编辑的方法
09-28
与readonly属性不同的是，使用disabled属性的input元素在表单提交时，其值不会被包含在提交的数据中。如果需要启用该文本框，需要通过JavaScript来移除disabled属性或设置其值。示例代码如下： ```html <input type=...
input type=file 显示的浏览 改成英文
06-30
在网页设计中，`<input type="file">` 是HTML元素的一个重要部分，它用于创建一个文件上传控件。...考虑到浏览器兼容性和用户体验，推荐使用JavaScript库或自定义CSS方法，确保在各种环境中都能实现一致的显示效果。
Vxe-table编辑表格插槽input框，选项lable显示，选中是value问题解决
A012100的博客
11-13 2029
在使用Vxe-table编辑表格组件时，是利用插槽的方式，把select下拉框嵌套进去。在做项目时，前端页面需要显示选项名称，但由于组件的问题，移走或关闭单元格（cell）的激活状态，
el-input-number @change校验数据 改变绑定数据值后输入框中值与绑定值不一致的问题
qq_53492819的博客
09-23 1544
el-input-number@change中 假如绑定的值a最开始值为1 然后在el-input-number中输入10然后经过校验发现10不合理 然后把a的值复原回1 在经过change中方法校验之后 发现a的值从1变成了1即a的值根本没发生改变 所以dom不会更新 因此输入框中的值也还会是你输入的10。在change绑定的方法中 对a直接赋输入的值 然后在setTimeout($nextTick不一定有效,所以建议用setTimeout)中再赋回原来的值。
element-plus的el-select的:value绑定值是对象时：导致的赋值不回显，导致的el-option无法命中具体选择了哪一个不打钩√的问题
dlchgg的博客
08-09 696
就比如我这里的item中没有label，虽然label=item.name，但是依然没用。我通过接口返回绑定之后，空有多个tags，没有值。这样也能顺便把el-option无法命中具体选择了哪一个不打钩√的问题也解决了。2、就把key修改为name + 汉字的一，二这种。不知道是不是特定版本的问题。主要是圈起来的两个部分。
input的value属性值与getAttribute('value')值不一致
HuaSir的博客
11-19 1328
问题 在D-Link路由器的前端界面上，发现setAttribute('value','xxx')不能改变输入框中的值。虽然getAttribute('value')的值已经被修改为xxx,但是input.value的值仍然未发生变化。 解决方法 引入jQuery库，用$('#id').attr('value','xxx')来对其value值进行修改。 ...
input输入框中的光标大小显示不一致
鹏javatar的专栏
09-10 2122
input输入框中的光标大小显示不一致
VUE element-ui组件中input和select组件的绑定的值偶尔异常的情况
qq_22689825的博客
09-04 1169
element-ui组件中input和select组件是我们比较常用的两个组件 在使用的过程中偶尔会出现一个比较奇怪的现象,显示的值总是慢一拍，不是自己刚刚输入/选中的，上一次输入/选中的值 例如input在输入后，每次输入值后，显示的都是上一次的值： 键盘输入： a 此时input文本框中没有值显示 键盘再次输入： b 此时input文本框中显示：a 键盘再次输入： c 此时input文本框中显示：ab select组件偶尔也会出现类似的情况 比如 select的下拉选项选择一个值：选项1 select框
解决uniapp组件中input输入框内容和数据不一致的问题
m0_63085629的博客
08-14 755
解决uniapp组件中input输入框内容和数据不一致的问题
el-input格式化数值，保留2位小数，实际为4位（不改变输入框中的实际值，仅改变显示的值）
m0_55000378的博客
11-08 6571
本文针对el-input金钱方面的格式化保留两位小数，实际为4位或更多。 1.格式化el-input，显示为2位小数，实际为4位，和利润率为83%,实际为0.83 最近公司在写一个年入几十亿的大项目，其中的涉及到钱方面，税率和利润率等等的加减乘除。 要求：文本框中显示10.77，数据库中显示为10.7692，数据库中保留4位小数，前端显示为2位小数，税率和利润率要求带上%符号。 大部分的el-input使用的都是v-model双向绑定，那么文本框的值改了为2位小数，数据库保存时候的值也会被改变，这时候一定要
vue input值既要绑定一个值又要显示接口给的值。
肖肖肖丽珠的博客
06-04 2282
如果input是一个的话我们之间可以命名 <input type="text" v-model="item" readonly="readonly"/> 然后data定义item。初始化的时候让他等于接口给的那个值就可以啦。但是如果input用在循环里面。 <spanv-for="(item1,key)in children":key="key" > <inputclass="el-input__inner" type="num...
鸿蒙中的TextInput显示图片
最新发布
07-08
<think>我们正在讨论HarmonyOS中的TextInput组件。根据引用，TextInput是用于文本输入的组件，但用户希望在其中显示图片。在标准UI组件中，TextInput通常只用于文本输入，不支持内嵌图片。然而，我们可以考虑一些替代方案来实现类似效果。 在鸿蒙系统中，我们可以通过自定义组件来实现。一种思路是使用一个容器（比如Row或Flex）来组合一个Image组件和一个TextInput组件，从而模拟出在输入框内显示图片的效果。另外，我们也可以考虑使用富文本（RichText）或者自定义绘制，但TextInput本身可能不支持。 根据引用[1]和[2]，TextInput组件主要关注文本输入，其属性包括placeholder、text等，没有直接支持图片的属性。因此，我们需要另辟蹊径。 方案： 1. 使用组合组件：在TextInput的左侧或右侧放置一个Image组件，并设置合适的样式，使它们看起来像是一个整体。 2. 使用自定义弹窗或菜单：当用户点击输入框时，弹出一个带有图片选择的菜单，但这可能不符合“显示图片”的需求。 3. 自定义TextInput组件：通过继承或组合的方式创建一个新的组件，支持在文本中插入图片（类似于富文本编辑器），但这比较复杂。 考虑到实现的简便性，我们采用第一种方案：组合Image和TextInput。 具体步骤（以ArkUI为例）： 1. 使用Row容器水平排列Image和TextInput。 2. 设置Row的边框，使其看起来像是一个输入框。 3. 调整Image和TextInput的样式，确保视觉一致性。 示例代码（ArkUI声明式范式）： ```javascript @Entry @Component struct TextInputWithImage { @State text: string = '' build() { Row() { // 左侧图片 Image($r('app.media.icon')) // 替换为你的图片资源 .width(30) .height(30) .margin({ left: 10 }) // 文本输入框 TextInput({ placeholder: '请输入', text: this.text }) .onChange((value) => { this.text = value }) .layoutWeight(1) // 占据剩余空间 .margin({ right: 10 }) } .border({ width: 1, color: '#ccc', radius: 4 }) // 设置边框，模拟输入框 .width('90%') .height(50) .alignItems(VerticalAlign.Center) } } ``` 这样，我们就实现了一个包含图片的文本输入框。图片位于输入框的左侧，用户可以在右侧输入文本。 注意事项： - 如果需要将图片放在右侧，调整Image和TextInput的顺序即可。 - 如果需要图片可点击，可以为Image添加onClick事件。 - 如果希望图片在输入框内部且文本输入时不会与图片重叠，可以通过设置TextInput的内边距（padding）来实现。 另外，引用[3]提到了Text组件可以设置背景，但TextInput同样可以设置背景。如果我们希望图片作为TextInput的背景，可以使用背景图属性（backgroundImage），但是这样图片不能与文本交互，且可能被文本覆盖。因此，组合方式更为灵活。 如果需求是在文本输入框内显示一个图标（比如搜索图标），那么上述组合方式是最常见的做法。 相关问题： 1. 如何实现TextInput的清除按钮？ 2. 如何自定义TextInput的光标颜色和样式？ 3. 在鸿蒙系统中如何实现密码输入框的显示/隐藏切换？</think>在鸿蒙系统中，TextInput 组件本身不支持直接显示图片，但可以通过以下两种方法实现类似效果： ### 方法一：组合布局（推荐） 使用 `Row` 或 `Flex` 容器将 `Image` 和 `TextInput` 组合，模拟输入框内嵌图片效果： ```typescript @Entry @Component struct InputWithImage { @State text: string = '' build() { // 使用 Row 组合组件 Row() { // 左侧图标 Image($r('app.media.search_icon')) // 加载资源图片 .width(24) .height(24) .margin({ left: 12 }) // 文本输入框（占满剩余空间） TextInput({ placeholder: '请输入内容' }) .onChange((value: string) => { this.text = value }) .layoutWeight(1) // 关键属性：占据剩余空间 .margin({ right: 12 }) } .border({ width: 1, color: '#ccc', radius: 8 }) // 统一边框 .width('90%') .height(50) .alignItems(VerticalAlign.Center) // 垂直居中 } } ``` **特点**： - 通过 `.layoutWeight(1)` 让 TextInput 自动填充剩余空间 - 统一的边框使组件视觉上成为整体 - 支持图标点击事件（在 Image 上添加 `.onClick`） - 符合鸿蒙声明式 UI 开发规范[^1][^2] ### 方法二：自定义装饰器（高级） 通过 `@Decorator` 创建可复用的组合组件： ```typescript @Decorator struct IconInput { @Prop icon: Resource // 图标资源 @Prop placeholder: string // 占位文本 build() { Row() { Image(this.icon) .width(20) .height(20) .margin(10) TextInput({ placeholder: this.placeholder }) .layoutWeight(1) } .border(BorderStyle.Solid, 1, '#eee') .borderRadius(10) } } // 使用示例 @Entry @Component struct Example { build() { Column() { IconInput({ icon: $r('app.media.user'), placeholder: '用户名' }) IconInput({ icon: $r('app.media.lock'), placeholder: '密码' }) } } } ``` ### 注意事项 1. **图标尺寸**：建议使用 24x24 或 32x32 尺寸图标 2. **间距调整**：通过 `margin` 控制图标与输入框间距 3. **交互扩展**：可为图标添加点击事件实现功能（如清除输入） 4. **资源管理**：图片需放在 `resources/base/media/` 目录[^3] > 两种方案均通过组件组合实现视觉整合，实际开发中推荐方法一作为基础实现，方法二适用于需要复用的场景。鸿蒙的声明式 UI 设计使组件组合更加灵活高效[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值