html文本框中有一个叉号标志,html 输入框显示“小叉叉”的清空图标

输入框获取焦点时动态显示“叉叉”的清空图表：在输入框中输入内容时，右边显示“叉叉”按钮；输入框为空的时候，“叉叉”按钮消失。

主要难点是在获取焦点的同时获取输入内容：方法 1 和 2 是 google 到的，但兼容性不够；方法 3 是自己用 js 实现。

1. H5 type="search" 类型：

H5 input 标签的一个类型；不支持 H5 就 JJ 了。

2. css 实现：

.input { padding: 5px; margin: 0; border: 1px solid #beceeb; }

.clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(a.png) no-repeat; outline: none; }

.input::-ms-clear { display: none; }

.input:valid + .clear { display: inline; }

function cssClear() {

alert("cssClear");

}

3. js 实现：

之前说了，在输入框获取焦点输入的时候，是获取不到输入值的。几近放弃的时候，惊喜发现，miniUI 提供了getInputText()、hsetInputText()两个方法，就是解决在获取焦点时候不能获取输入值得问题。现在问题得以解决。

.clear {display: none;position: absolute;width: 16px;height: 16px;margin: 4px 0 0 -22px;background:url(/dqy/swsj/images/fzz/clear.png) no-repeat;outline: none;}

if(mini.get("inputId").getInputText() != "") {

$("#clear").show();

} else {

$("#clear").hide();

}

附：貌似一些 UI 框架和 js 库也会提供 getInputText() 的方法，比如 Angular。原生 js 的话，暂且实在无能为力，难道要在事件中自己拼接字符串？

html文本框中有一个叉号标志,html 输入框显示“小叉叉”的清空图标相关推荐

html文本框中有一个叉号标志,html 输入框显示“小叉叉”的清空方法
Windows Azure 服务总线和物联网机器到机器 (M2M) 计算正迅速成为一种技术,所有开发人员和架构师需要拥抱. 许多研究表明一个未来世界的数百亿美元的设备 (在地球上的每一个人的出现). ...
Java实验8 T2.编程包含一个文本框和一个文本区域
编程包含一个文本框和一个文本区域,文本框内容改变时,将文本框中的内容显示在文本区域中:在文本框中按回车键时,清空文本区域的内容. package test8;import javax.swing.ev ...
python作业.创建两个文本框，一个按钮。第 1 个文本框绑定任意键事件，敲击键盘任意可显示字符，在交互窗口中显示该字符；第 2 个文本框绑定＜a＞键事件，敲击键盘 a 字符，在交互窗口中显示 10
""" 创建两个文本框,一个按钮. 第 1 个文本框绑定任意键事件,敲击键盘任意可显示字符,在交互窗口中显示该字符: 第 2 个文本框绑定<a>键事件,敲击键 ...
创建两个文本框，一个按钮。第 1 个文本框绑定任意键事件，敲击键盘任意可显示字符，在交互窗口中显示该字符；
创建两个文本框,一个按钮.第 1 个文本框绑定任意键事件,敲击键盘任意可显示字符,在交互窗口中显示该字符:第 2 个文本框绑定键事件,敲击键盘 a 字符,在交互窗口中显示 10 个'a'字符:按钮绑定 ...
Java图形window界面创建一个文本框和一个按钮awt容器
package com.java;import java.awt.*;public class HelloWorld {public static void main(String[] args) { ...
PyQt5随笔：QTextEdit和QTextBrowser文本框多次设置输入内容时，显示全部内容的方法
PyQt5随笔:QTextEdit和QTextBrowser文本框多次设置输入内容时,显示全部内容的方法 1.前言 QTextEdit 和 QTextBrowser 文本控件方法基本一样,只不过 QT ...
python设计程序输出一个带文本框和图像的窗体_设计一个文本框用户在文本框中输入什么窗体标题就同步显示什么怎么设计啊...
展开全部要求 1.掌握算法的基本概念. 2.掌握基本数据结构及其操作. 3.掌握基本排序和查找算法. 4.掌握逐e68a8462616964757a686964616f31333264626533步 ...
html隐藏input边框线,html中去掉文本框(input type=text)的边框或只显示下边框
去掉: 只留下边框: CSS - input 只显示下边框 CSS 样式 : border:none; border-bottom: 1px solid #000 文本框input:text ...
html获取文本框中的文字,JavaScript实现input输入框点击获取文字内容
Js实现INPUT输入框,当鼠标点击文字时自动获取文字内容,并显示在文本框中,一个惯用的表单技巧,有时可省去一些用户输入的麻烦,可有效提升用户体验. input输入框获取js点击文字内容 .c{ wi ...

html文本框中有一个叉号标志,html 输入框显示“小叉叉”的清空图标

html文本框中有一个叉号标志,html 输入框显示“小叉叉”的清空图标相关推荐

最新文章

热门文章