input点击后placeholder中的提示消息消失

html中，placeholder作为input的一个属性，起到了在输入框中占位并提示的作用。 但是有一些浏览器，如chrome，当鼠标点击输入框时，placeholder的值不消失，只有输入数据才消失，会使前端用户体验大打折扣。 看了很多大神的方法，写了长长的js，看着有点吃力，就想到了下面这种最傻的方法解决了这个问题。 html代码： &lt;input type="text" placeholder="多个关键词空格隔开"&gt; 鼠标点击input时，placeholder中的提示信息消失： &lt;input type="text" placeholder="多个关键词空格隔开" onfo 在HTML5中，`placeholder`属性是一个非常实用的功能，它允许开发者在输入框`<input>`内设置一个提示性文本，通常用来表明用户应该输入何种类型的资料。然而，不同的浏览器对`placeholder`属性的支持和行为可能有所不同，这给前端开发带来了一些挑战。针对这个问题，我们来详细探讨`placeholder`属性的使用、浏览器兼容性和解决策略。 `placeholder`属性的语法如下： ```html <input type="text" placeholder="请输入您的姓名"> ``` 在这个例子中，“请输入您的姓名”就是`placeholder`的提示信息，当输入框为空时显示，一旦用户开始输入，提示信息就会自动消失。 然而，不同浏览器对`placeholder`的处理方式并不统一。例如，IE10及更高版本在输入框获得焦点时会自动隐藏`placeholder`文本，而Firefox、Chrome和Safari则是在用户开始输入时才消失。这种差异可能导致用户体验不一致，特别是对于期望一致性的产品设计而言。 为了解决这个问题，我们可以采用以下两种方法： 1. **方式一：使用`input`的`value`属性** 在这种方式中，我们将`placeholder`的提示文本作为`input`的初始`value`。当用户聚焦输入框时，将`value`清空，从而达到提示文本消失的效果。当用户失去焦点且输入为空时，再将`value`设回提示文本。这种方法的缺点是，`value`属性被用作提示，可能会影响表单的正常提交，需要额外处理。 2. **方式二：使用额外的标签覆盖** 这种方法是在页面中创建一个绝对定位的`span`元素，将其内容和样式设置为与`placeholder`相同，然后覆盖在`input`上方。当输入框聚焦时，隐藏`span`元素；失去焦点且输入为空时，再显示`span`。这种方式的优点是不占用`value`属性，但需要额外的DOM操作和样式管理。 为了实现这些解决方案，可以使用JavaScript或jQuery。例如，使用jQuery的一个简单实现可以如下： ```javascript $.fn.extend({ placeholder: function(options) { var settings = $.extend({ word: '', color: '#ccc', evtType: 'focus' }, options); function bootstrap($input) { // 其他逻辑... $input.on(settings.evtType, function() { if ($input.val() === settings.word) { $input.val('').css('color', settings.defColor); } }).on('blur', function() { if ($input.val() === '') { $input.val(settings.word).css('color', settings.color); } }); } this.each(function() { bootstrap($(this)); }); } }); ``` 这段代码定义了一个jQuery插件，用于处理`placeholder`的行为，支持自定义提示文本、颜色和触发事件类型。根据实际需求，你可以选择合适的方式进行调整。 `placeholder`属性在HTML5中提供了方便的输入提示功能，但在不同浏览器中的表现不一。通过JavaScript或jQuery等工具，我们可以编写自定义的逻辑来统一各浏览器下的行为，确保良好的用户体验。在实现过程中，需注意兼顾性能和代码简洁性，避免过度复杂化。