<input type="hidden" name="preYxfName" id="preYxfName" value="${preYxfName!}" data-options="validType:['maxLength[100]']"> 这段代码感叹号是什么意思

时间: 2024-06-16 07:02:33 浏览: 107

完美解决input[type=number]无法显示非数字字符的问题

5星 · 资源好评率100%

在移动端webview实现的页面中，有数字的地方必须使用input type=”number”类型的input，否则触发后的键盘为全键盘，而非数字键盘。但另外的一个问题是，input 为 type=”number” 类型的无法显示非数字字符，比如：12/23中/。只能采取另外的思路来解决，比如：显示的时候用非number类型的input或其它元素，当触发onfocus后，利用js 动态修改为number类型。 <input class="pg-page-num" type="text" name="" value="34/233" id="pageNum"> <input type="hi 在移动端Web开发中，我们经常会遇到输入框（`<input>`）的需求，特别是涉及到数字输入时，使用`type="number"`的属性可以调出设备的数字键盘，方便用户输入整数或小数。然而，`type="number"`有一个限制，那就是它只允许用户输入纯数字，不允许输入任何非数字字符，例如分数、货币符号等。这在某些场景下会带来不便，比如显示页码或者比例时，我们可能需要像“12/23”这样的格式。为了解决这个问题，我们可以采用一种巧妙的处理方式，结合HTML和JavaScript来实现。在页面上创建两个`<input>`元素，一个是用于显示的文本输入框，类型设置为`type="text"`，例如`<input class="pg-page-num" type="text" name="" value="34/233" id="pageNum">`；另一个是隐藏的输入框，用于存储总页数，类型设置为`type="hidden"`，例如`<input type="hidden" name="" value="25" id="totalPage">`。接下来，我们通过JavaScript监听`focus`和`blur`事件来动态切换输入框的类型。当输入框获得焦点（`focus`事件）时，将文本输入框的类型改为`type="number"`，这样用户可以使用数字键盘输入；同时，我们需要保存当前的值（`sOldVal`），以便后续恢复。当输入框失去焦点（`blur`事件）时，我们将输入框的类型改回`type="text"`，然后检查用户是否输入了新的值。如果值有变化，我们在新值后面加上总页数（`oTotal.value`），以保持“/”分隔的格式。以下是具体的JavaScript代码示例： ```javascript var oPage = document.querySelector('#pageNum'), oTotal = document.querySelector('#totalPage'), sOldVal = ''; oPage.addEventListener('focus', function() { this.type = 'number'; sOldVal = this.value; }, false); oPage.addEventListener('blur', function() { var sVal = this.value; this.type = 'text'; if (sVal != sOldVal) { this.value += '/' + oTotal.value; } }, false); ``` 这段代码实现了在用户聚焦输入框时显示数字键盘，允许用户输入数字，并在用户离开输入框时，自动将输入的数字与预先设定的总页数拼接成期望的格式。这样，既满足了数字键盘的需求，又解决了非数字字符显示的问题。这个解决方案通过JavaScript动态修改`<input>`元素的类型和值，巧妙地规避了`type="number"`的限制，提供了一种兼容性和用户体验都较好的方法。在实际开发中，可以根据具体需求进行适当的调整和优化，以适应不同的场景和需求。

在JavaScript模板字符串中，`${}` 表示插值，用于在字符串中嵌入表达式的值。`${preYxfName!}` 这里，`!` 后面的感叹号是一个条件表达式，如果`preYxfName` 的值为 `null`、`undefined` 或者空字符串，那么会使用默认值（在这个例子中，默认值就是 `${preYxfName!}` 自身）。简单来说，如果`preYxfName` 未被赋值或者其值为空，这个部分会显示为 `preYxfName`，否则会插入变量的实际值。这是一种避免在使用变量时可能引发的空指针异常的机制。

阅读全文

<input type="hidden" name="preYxfName" id="preYxfName" value="${preYxfName!}" data-options="validType:['maxLength[100]']"> 这段代码感叹号是什么意思

相关推荐

HTML5&CSS3网页制作：Input元素的type属性.pptx

vue-pattern-input：使用RegExp限制输入

<label for="gender-input">邮箱：</label> <input type="text" id="email" placeholder="请输入邮箱" class="form-control" style="width: 50%; display: block; margin: 0 auto;" maxlength="5"> 无法在同一行输出

<input type="text" name="email" size="10" maxlength="20"> <input type="password">

<input type="text" id="newLockText" value="请输入新密码" style="display:block" /> <input type="password" id="newLockPwd" maxlength="6" style="display:block" /> 密码显示隐藏切换

Line number: <input type="text" name="Line" size="2" maxlength="2" class="hidden()"> function hidden(){ display: none; }html中为什么无法隐藏

Line number: <input type="text" name="Line" size="2" maxlength="2" class="display: none;"> html中为什么无法隐藏

<view class="input-item"> <text class="tit">密码</text> <input type="password" v-model="form.password" placeholder="6-18位不含特殊字符的数字、字母组合" placeholder-class="input-empty" maxlength="20" password data-key="password" @confirm="login" /> </view>

登录页面用户名输入框标签如下：<input type="text" id="username" class="login-username" maxlength="20" name="nameuser" tabindex="1">，请使用5种不同类型的手段识别该元素。

姓名*： <input id="CustomerName" name="CustomerName" class="mini-textbox" required="true" maxlength="15" width="150" />

最新推荐

电子商务之价格优化算法：梯度下降：机器学习在价格优化中的角色.docx

探索AVL树算法：以Faculdade Senac Porto Alegre实践为例

管理建模和仿真的文件

【ggplot2绘图技巧】：R语言中的数据可视化艺术

HAL库怎样将ADC两个通道的电压结果输出到OLED上？

小学语文教学新工具：创新黑板设计解析

"互动学习：行动中的多样性与论文攻读经历"

【R语言并行计算秘籍】：倍增数据处理速度的高效策略

如何用C语言编程精确计算级数1 - 1/11 + 1/21 - 1/3! + ...（直到最后一项的绝对值小于1E-4）并求得e的近似值？

Minecraft服务器管理新插件ServerForms发布