`
fen5251
  • 浏览: 21039 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

input-placeholder获取焦点清空

    博客分类:
  • html
阅读更多
html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用。

但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消失,会使前端用户体验大打折扣。

看了很多大神的方法,写了长长的js,看着有点吃力,就想到了下面这种最傻的方法解决了这个问题。

html代码:

<input type="text" placeholder="请输入">
在其中只需加入两个简短的js即可:

<input type="text" placeholder="请输入" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘请输入‘">
分享到:
评论

相关推荐

    input中placeholder在Ie上兼容

    然后,通过`focus`和`blur`事件来动态处理输入框的值:当输入框获取焦点时,如果值等于`placeholder`,则清空;失去焦点时,如果值为空或者等于`placeholder`,则恢复`placeholder`值。 至于标签"placeholder",它...

    让低版本浏览器支持input的placeholder属性(js方法)

    // 获取input元素的placeholder属性值 var ph = me.attr('placeholder'); // 如果有placeholder属性且输入框为空 if (ph && !me.val()) { // 设置输入框的值为placeholder文本,并改变颜色和行高 me.val(ph)...

    jquery文本框显示描述文字rar

    这段代码的工作原理是,当文本框获取焦点(用户点击输入框)且内容为空时,我们将`placeholder`的文本填充到输入框内。然后,当文本框失去焦点(用户点击其他地方)或内容改变时,如果发现内容仍然是默认文本,我们...

    使用jQuery快速解决input中placeholder值在ie中无法支持的问题

    - 当输入框获取焦点时,如果其值等于`placeholder`文本,则清空值。 - 当输入框失去焦点时,如果其值为空,则恢复`placeholder`文本。 ```javascript $(document).ready(function() { var doc = document, ...

    简单语句实现表单获取和失去焦点输入框提示效果

    当输入框获取焦点时,如果其值与占位符相同,就清空值并恢复字体颜色。而当输入框失去焦点且值为空时,我们将提示文字恢复并调整颜色。 现在,当你在浏览器中打开`search.html`文件,你会看到一个搜索表单,输入框...

    jq获取焦点插入内容

    本文将详细讲解如何使用jQuery获取焦点并插入内容,这在创建交互式表单或编辑器时非常实用。 首先,我们需要理解jQuery中的`focus()`方法。这个方法用于使元素获得焦点,通常用于文本输入框、密码框等可以输入的...

    jQuery实现文本框获得焦点文字消失

    在这个特定的场景中,我们关注的是如何使用jQuery来实现一个功能:当文本框(input[type="text"])获取焦点时,其预设的文字自动消失,而当失去焦点时,文字又能重新出现。这个功能常见于搜索框或表单输入,以引导...

    HTML5表单中新增的input输入类型3.pdf

    `readonly`使输入框变为只读,`disabled`则在页面加载时禁用输入框,`required`确保用户必须填写该字段,`autofocus`让输入框在页面加载时自动获取焦点,`pattern`则允许通过正则表达式来验证用户输入的内容。...

    文本框聚焦提示文字消失失,去焦点显示提示文字

    如果`inputValue`等于提示文字,那么在聚焦时清空它,在失去焦点时恢复提示文字。 在给定的压缩包文件“SetTipText”中,可能包含了实现这一功能的源代码或者示例项目。通过分析和学习这些代码,开发者可以更好地...

    jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果

    接着,我们需要在输入框获取焦点时隐藏`&lt;span&gt;`,失去焦点且无输入时显示`&lt;span&gt;`: ```javascript $simulationSpan.insertAfter(this); $(this).focus(function() { $simulationSpan.hide(); }).blur(function() ...

    微信小程序 input输入框控件详解及实例(多种示例)

    &lt;input type="email" placeholder="请输入邮箱地址" /&gt; &lt;input type="phone" placeholder="请输入手机号码" /&gt; ``` 8. **导航到其他页面展示更多输入框类型** - 示例代码中的`navigator`组件可以链接到其他页面...

    element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

    当从后端获取到数据并传入`callback`函数时,预期应该显示输入建议列表,但实际上却只显示了一个空白框。解决这个问题的关键在于理解`&lt;el-autocomplete&gt;`组件的数据来源。根据Element-UI的官方文档,输入建议列表的...

    jquery实现输入框邮箱提示效果

    &lt;input type="email" id="emailInput" placeholder="请输入邮箱"&gt; &lt;div id="emailSuggestions"&gt;&lt;/div&gt; ``` 接下来,我们可以使用jQuery来监听`&lt;input&gt;`元素的`keyup`事件,每当用户在输入框中键入字符时,触发函数...

    JavaScript实现的文本框placeholder提示文字功能示例

    // 当文本框获取焦点时,如果值等于默认值,则清空输入并改变颜色 input.onfocus = function() { if (this.value == defaultValue) { input.value = ""; setCursorPosition(this, 0); } }; // 当文本框...

    Html5的placeholder属性(IE兼容)实现代码

    5. 添加`onfocus`事件监听器,当输入框获得焦点时,如果其值等于`placeholder`值,则清空输入框的值。 6. 添加`onblur`事件监听器,当输入框失去焦点时,如果其值为空,将`placeholder`值重新设置为输入框的值。 ...

    让IE下支持Html5的placeholder属性的插件

    当输入框获取焦点时,如果其值与placeholder相同,就清空输入框;失去焦点时,如果输入框为空,就恢复placeholder文本。 需要注意的是,尽管这样的解决方案可以实现placeholder的效果,但在有多个输入字段的场景下...

    文本框点击时文字消失,失去焦点时文字出现

    对于我们的需求,主要会用到`:focus`伪类,它用于选择获取焦点的元素。当input文本框被点击并获取焦点时,`:focus`伪类会被激活。 ### 知识点三:JavaScript事件监听 要实现文本框点击时文字消失,失去焦点时文字...

    关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法

    将`placeholder`文本作为初始`value`,在获取焦点时清空`value`,失去焦点且输入为空时恢复`value`为`defaultValue`。这种方法的缺点是`value`被占用,可能会影响数据验证逻辑。 2. 方式二:创建一个额外的`&lt;span&gt;`...

    移动端H5实现搜索框样式源码

    - **聚焦状态**:当输入框获取焦点时,添加不同的边框颜色或动画效果,以增强用户体验。 - **图标整合**:可以使用字体图标库(如Font Awesome)或背景图片,将搜索图标融入输入框。 3. **JavaScript交互**: - ...

Global site tag (gtag.js) - Google Analytics