常用input文本框内容自动垂直居中并默认提示文字单击为空

三个功能： 1、内容自动垂直居中 2、默认提示文字显示灰色 3、单击后变为空 复制代码代码如下: &lt;input type=”text” name=”wd1″ id=”qy_1″ maxlength=”100″ style=”color:gray;width:199px;height:30px;line-height:30px;” autocomplete=”off” value=”请输入企业名称” style=”color:gray;” onfocus=”[removed]if(this.value == ‘请输入企业名称’) this.value = ”; this.style.co 在网页设计中，文本框（`<input type="text">`）是用户输入信息的基本元素。为了提升用户体验，我们常常需要对文本框进行定制化处理，使其具备特定的功能，如内容自动垂直居中、默认提示文字显示灰色以及单击后清空提示文字。下面将详细解释如何实现这些功能。 内容自动垂直居中的实现主要依赖于`line-height`属性。`line-height`定义了行内元素的基线之间的垂直距离，当其值与元素的高度相同时，文本会居中显示。例如，在给定的代码中，`<input>`标签设置了`height:30px;`和`line-height:30px;`，这样就确保了文本在文本框内垂直居中。 为了让默认提示文字显示为灰色，我们可以设置`color`属性。在示例代码中，`style="color:gray;"`使得初始显示的“请输入企业名称”文本颜色为灰色，这样用户可以清楚地识别出这是提示信息而不是已输入的内容。 第三，单击后清空提示文字和恢复灰色提示，这部分功能是通过JavaScript实现的。`onfocus`事件在文本框获得焦点（即用户点击文本框时）触发，`onblur`事件则在失去焦点时触发。在`onfocus`事件中，我们检查文本框的值是否等于默认提示文字，如果是，则清空内容并保持灰色样式。相应的JavaScript代码如下： ```javascript onfocus="javascript:if(this.value == '请输入企业名称') this.value = ''; this.style.color='gray';" onblur="javascript:if(this.value == '') {this.value = '请输入企业名称'; this.style.color = 'gray';}" ``` 这段JavaScript代码实现了当用户点击文本框时，若文本框内容仍为默认提示，就清空内容；当用户离开文本框（失去焦点）时，如果文本框为空，就恢复默认提示文字并设为灰色。 以上代码展示了如何通过CSS样式和JavaScript脚本来增强`<input type="text">`的用户体验。内容垂直居中提供了一种整洁的视觉效果，灰色提示文字明确了输入区域的作用，而JavaScript的交互设计使得用户在使用时更加便捷。在实际开发中，这样的优化能够大大提高网站或应用的易用性。