html中，placeholder作为input的一个属性，起到了在输入框中占位并提示的作用。
但是有一些浏览器，如chrome，当鼠标点击输入框时，placeholder的值不消失，只有输入数据才消失，会使前端用户体验大打折扣。
看了很多大神的方法，写了长长的js，看着有点吃力，就想到了下面这种最傻的方法解决了这个问题。
html代码：
<input type="text" placeholder="请输入">
在其中只需加入两个简短的js即可：
<input type="text" placeholder="请输入" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘请输入‘">
分享到：
相关推荐
然后，通过`focus`和`blur`事件来动态处理输入框的值：当输入框获取焦点时，如果值等于`placeholder`，则清空；失去焦点时，如果值为空或者等于`placeholder`，则恢复`placeholder`值。 至于标签"placeholder"，它...
// 获取input元素的placeholder属性值 var ph = me.attr('placeholder'); // 如果有placeholder属性且输入框为空 if (ph && !me.val()) { // 设置输入框的值为placeholder文本，并改变颜色和行高 me.val(ph)...
这段代码的工作原理是，当文本框获取焦点（用户点击输入框）且内容为空时，我们将`placeholder`的文本填充到输入框内。然后，当文本框失去焦点（用户点击其他地方）或内容改变时，如果发现内容仍然是默认文本，我们...
- 当输入框获取焦点时，如果其值等于`placeholder`文本，则清空值。 - 当输入框失去焦点时，如果其值为空，则恢复`placeholder`文本。 ```javascript $(document).ready(function() { var doc = document, ...
当输入框获取焦点时，如果其值与占位符相同，就清空值并恢复字体颜色。而当输入框失去焦点且值为空时，我们将提示文字恢复并调整颜色。 现在，当你在浏览器中打开`search.html`文件，你会看到一个搜索表单，输入框...
本文将详细讲解如何使用jQuery获取焦点并插入内容，这在创建交互式表单或编辑器时非常实用。 首先，我们需要理解jQuery中的`focus()`方法。这个方法用于使元素获得焦点，通常用于文本输入框、密码框等可以输入的...
在这个特定的场景中，我们关注的是如何使用jQuery来实现一个功能：当文本框（input[type="text"]）获取焦点时，其预设的文字自动消失，而当失去焦点时，文字又能重新出现。这个功能常见于搜索框或表单输入，以引导...
`readonly`使输入框变为只读，`disabled`则在页面加载时禁用输入框，`required`确保用户必须填写该字段，`autofocus`让输入框在页面加载时自动获取焦点，`pattern`则允许通过正则表达式来验证用户输入的内容。...
如果`inputValue`等于提示文字，那么在聚焦时清空它，在失去焦点时恢复提示文字。 在给定的压缩包文件“SetTipText”中，可能包含了实现这一功能的源代码或者示例项目。通过分析和学习这些代码，开发者可以更好地...
接着，我们需要在输入框获取焦点时隐藏`<span>`，失去焦点且无输入时显示`<span>`： ```javascript $simulationSpan.insertAfter(this); $(this).focus(function() { $simulationSpan.hide(); }).blur(function() ...
<input type="email" placeholder="请输入邮箱地址" /> <input type="phone" placeholder="请输入手机号码" /> ``` 8. **导航到其他页面展示更多输入框类型** - 示例代码中的`navigator`组件可以链接到其他页面...
当从后端获取到数据并传入`callback`函数时，预期应该显示输入建议列表，但实际上却只显示了一个空白框。解决这个问题的关键在于理解`<el-autocomplete>`组件的数据来源。根据Element-UI的官方文档，输入建议列表的...
<input type="email" id="emailInput" placeholder="请输入邮箱"> <div id="emailSuggestions"></div> ``` 接下来，我们可以使用jQuery来监听`<input>`元素的`keyup`事件，每当用户在输入框中键入字符时，触发函数...
// 当文本框获取焦点时，如果值等于默认值，则清空输入并改变颜色 input.onfocus = function() { if (this.value == defaultValue) { input.value = ""; setCursorPosition(this, 0); } }; // 当文本框...
5. 添加`onfocus`事件监听器，当输入框获得焦点时，如果其值等于`placeholder`值，则清空输入框的值。 6. 添加`onblur`事件监听器，当输入框失去焦点时，如果其值为空，将`placeholder`值重新设置为输入框的值。 ...
当输入框获取焦点时，如果其值与placeholder相同，就清空输入框；失去焦点时，如果输入框为空，就恢复placeholder文本。 需要注意的是，尽管这样的解决方案可以实现placeholder的效果，但在有多个输入字段的场景下...
对于我们的需求，主要会用到`:focus`伪类，它用于选择获取焦点的元素。当input文本框被点击并获取焦点时，`:focus`伪类会被激活。 ### 知识点三：JavaScript事件监听 要实现文本框点击时文字消失，失去焦点时文字...
将`placeholder`文本作为初始`value`，在获取焦点时清空`value`，失去焦点且输入为空时恢复`value`为`defaultValue`。这种方法的缺点是`value`被占用，可能会影响数据验证逻辑。 2. 方式二：创建一个额外的`<span>`...
- **聚焦状态**：当输入框获取焦点时，添加不同的边框颜色或动画效果，以增强用户体验。 - **图标整合**：可以使用字体图标库（如Font Awesome）或背景图片，将搜索图标融入输入框。 3. **JavaScript交互**： - ...