定义一个带 X 号关闭按钮的输入框

最新推荐文章于 2024-02-05 10:42:51 发布
最新推荐文章于 2024-02-05 10:42:51 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Byte_Dance/article/details/78894356
版权

HTML5中新特性 search 属性值,作用于input里边的type属性中

语法:<form action="www.dingyigeng.site" οnsubmit="retutn check()">

<input type="search">

</form>


效果 :

 


由于是HTML5中的新特性,所以手机上也可以做到此效果:


Byte_Dance
关注
专栏目录
c语言按一个按钮弹出窗口,实现点击按钮,弹出输入框的内容
weixin_34637857的博客
05-18 5364
如果要实现点击一个按钮,然后将输入框中的输入的内容在弹出的提示框中显示出来这个功能的话,使用大部分可视化IDE开发工具都是很简单的事情,用鼠标拖拖控件不用几分钟就可以实现.当然了,如果真按照以上方式实现这个功能然后写成一篇文章的话也就有点太敷衍了.所以,为了加大难度,在这里我们要使用C语言来实现这个功能.界面功能全部用代码实现,想想就有点高大上是不是.首先,我们要先创建窗口.需要创建一个主窗口和3...
python身份证号码共18位_用Python写一个身份证号码校验工具
weixin_30705125的博客
12-29 4588
这是一个用Python开发的GUI实战项目：居民身份证信息校验系统一、总体介绍本项目使用Tkinter作为GUI模块，充分利用Python面向对象的思想，开发一款实现身份证号码校验的应用程序。具备解析用户输入的身份证号码中的地区信息、出生日期、以及身份证号码是否合法等功能。是练习Python面向对象思想、tkinter GUI模块的优质练手项目。项目演示项目整体效果以上，如果我们输入一个正确的身份...
Input框后面的“X”实现清除文本框插件
12-14
插件需求： IE11 在Input框内添加一个“X”，用来点击清除用户输入的数据，个人觉挺好用的，但是其它浏览器不会出现， 特进行插件扩展，实现所有浏览器都能出现“X” 实现原理： 此插件通过查找所有Input框 type="text" 属性 在input 文本框的最后添加一个“X” 插件环境： 基于jQuery + Bootstrap 插件使用： 引用 ClearButton 样式 引用 clearbutton 脚本 注意： 样式应该在Bootstrap的样式后面引用，以免被样式覆盖，而没有效果！
带有X关闭按钮的输入框
weixin_42555053的博客
10-19 537
HTML5中的新特性search属性，在input中设置type=“search”即可 <input type="search" placeholder="请输入您要查询的内容" > 显示效果如下：
html输入框清除按钮,输入框有内容出现删除按钮
weixin_34370877的博客
06-10 1083
html5代码:JS代码:function toggleIcon(ele){var inputVal = ele.value;var clearEle = ele.nextElementSibling;if(inputVal == ''){clearEle.className = 'ub-img ub clear uhide';} else {clearEle.className = 'ub-im...
HTML5+CSS3实现内置功能按钮提示框带有关闭小图标
09-26
HTML5+CSS3内置功能按钮提示框是一款功能的HTML5+CSS3弹出提示框，带有小图标，而且可以关闭提示框，可以内置一些功能按钮，比如确定和取消。
html div关闭按钮样式,X关闭按钮只使用css
weixin_30938397的博客
06-15 661
你正在寻找的要点是tag-remove:before {content: 'x'; // here is your X(cross) sign.color: #fff;font-weight: 300;font-family: Arial, sans-serif;}你可以很容易地让自己重新开始.编辑：#mdiv{width:25px;height:25px;background-color:red...
CSS3带关闭按钮登录窗口代码
06-11
【CSS3带关闭按钮登录窗口代码】是一种利用CSS3技术实现的网页登录界面设计，它包含了一个可关闭的窗口功能，适用于各种类型的网站，提供了一种简洁且实用的用户交互体验。这种登录窗口的设计通常包括输入框、按钮...
带删除的输入框,DeteleEditext
02-07
`R.drawable.ic_close`指的是删除按钮的图标，通常是一个关闭或者清除的图标。 在实际项目中，你可能会根据需求进一步扩展这个组件，比如添加动画效果、改变删除按钮的行为（如只清除最后一个字符），或者根据输入...
wpf带文字水印背景输入框优美登录界面
12-17
在本文中，我们将深入探讨如何使用C# WPF（Windows Presentation Foundation）来创建一个美观的登录界面，该界面带有文字水印背景的输入框，并具备无边框、可拖动、可缩放以及退出功能。WPF是.NET Framework的一个...
input框添加图片按钮
02-07
为减少页面空间占用，将图片按钮放置在input输入框中，兼容火狐、谷歌和IE，图片自行替换
input框中添加一个 X（关闭/清空按钮）
最新发布
yhj198927的博客
02-05 1867
要在输入框（ 元素）中添加一个 X（关闭/清空按钮），可以使用 CSS 和 JavaScript 实现。
input 输入监听以及关闭按钮隐藏
PanDa____的博客
04-27 419
<div class="forFlex searchPerson"> <div class="forFlex"> <i class="searchPersonBtn"></i> <input type="text" class="inputPerson" placeholder="请输入成员或部门"> </div> <i class="searchPers...
ie11 下 input 默认有 X 关闭按钮的问题
dicha7140的博客
08-24 440
&::-ms-clear, ::-ms-reveal{display: none;} 转载于:https://www.cnblogs.com/CyLee/p/9528260.html
HTML5去除input [type=search] 的默认边框和删除按钮
热门推荐
大爱无疆的博客
03-28 1万+
input [type=search]  是HTML新属性 ， 定义用于搜索的文本字段； x-webkit-speech  属性：在GOOGLE浏览器上  还会显示一个小话筒  autocomplete="off"  属性  关闭浏览器自动记录之前输入的值   webkit内核浏览器里 input 框类型如果是 type="search"
前端——》Input框内按钮
叙传
07-17 9395
1，照例先上效果图。如图在input框的左边有一个小图标，鼠标可点击。 2，实现方式：首先定义一个最外层的div将input框和button按钮包裹起来。我前端用的是LayUi，当然了这跟layui关系不大，最主要的代码是。z-index:1和z-index:2，表示将input的div置于底层，将button的div置于input的上层，这个z-index的值越大就越在上层。随后将butt...
使用easyx通过C语言设计一个用户登录界面
05-24
以下是一个简单的用户登录界面的示例代码，使用了EasyX图形库和C语言： ```c #include <graphics.h> #include <conio.h> #include <stdio.h> #include <string.h> // 定义登录对话框的坐标和大小 #define DIALOG_X 400 #define DIALOG_Y 200 #define DIALOG_W 400 #define DIALOG_H 300 // 定义输入框的坐标和大小 #define INPUT_X 150 #define INPUT_Y 100 #define INPUT_W 200 #define INPUT_H 30 // 定义按钮的坐标和大小 #define BUTTON_X 180 #define BUTTON_Y 200 #define BUTTON_W 120 #define BUTTON_H 40 // 定义输入框的文本长度 #define MAX_TEXT_LEN 20 // 定义用户名和密码 const char* USERNAME = "admin"; const char* PASSWORD = "123456"; // 定义输入框结构体 typedef struct { char text[MAX_TEXT_LEN + 1]; int len; int x; int y; int w; int h; } InputBox; // 初始化输入框 void InitInputBox(InputBox* box, int x, int y, int w, int h) { box->len = 0; box->x = x; box->y = y; box->w = w; box->h = h; memset(box->text, 0, sizeof(box->text)); } // 绘制输入框 void DrawInputBox(InputBox* box) { // 绘制输入框边框 setcolor(WHITE); rectangle(box->x, box->y, box->x + box->w, box->y + box->h); // 绘制输入框文本 settextcolor(WHITE); outtextxy(box->x + 5, box->y + 5, box->text); } // 处理输入框的键盘输入 void HandleInputBox(InputBox* box, char ch) { if (ch == '\b' && box->len > 0) { // 处理退格键 box->text[--box->len] = '\0'; } else if (ch >= ' ' && ch <= '~' && box->len < MAX_TEXT_LEN) { // 处理可见字符 box->text[box->len++] = ch; box->text[box->len] = '\0'; } } // 判断输入框中的文本是否与给定的字符串相等 bool IsTextEqual(InputBox* box, const char* str) { return strcmp(box->text, str) == 0; } int main() { // 初始化图形窗口 initgraph(640, 480); setbkcolor(BLACK); cleardevice(); // 绘制登录对话框 setfillcolor(GRAY); settextcolor(WHITE); rectangle(DIALOG_X, DIALOG_Y, DIALOG_X + DIALOG_W, DIALOG_Y + DIALOG_H); outtextxy(DIALOG_X + 150, DIALOG_Y + 50, "用户登录"); // 初始化用户名和密码输入框 InputBox usernameBox, passwordBox; InitInputBox(&usernameBox, DIALOG_X + INPUT_X, DIALOG_Y + INPUT_Y, INPUT_W, INPUT_H); InitInputBox(&passwordBox, DIALOG_X + INPUT_X, DIALOG_Y + INPUT_Y + 50, INPUT_W, INPUT_H); // 绘制用户名和密码输入框 outtextxy(DIALOG_X + 50, DIALOG_Y + INPUT_Y + 5, "用户名："); DrawInputBox(&usernameBox); outtextxy(DIALOG_X + 50, DIALOG_Y + INPUT_Y + 55, "密 码："); DrawInputBox(&passwordBox); // 绘制登录按钮 setfillcolor(LIGHTBLUE); rectangle(DIALOG_X + BUTTON_X, DIALOG_Y + BUTTON_Y, DIALOG_X + BUTTON_X + BUTTON_W, DIALOG_Y + BUTTON_Y + BUTTON_H); outtextxy(DIALOG_X + BUTTON_X + 40, DIALOG_Y + BUTTON_Y + 10, "登录"); // 处理用户输入 char ch; while ((ch = getch()) != 27) { // 按下 ESC 键退出 if (ch == '\r') { // 按下回车键登录 if (IsTextEqual(&usernameBox, USERNAME) && IsTextEqual(&passwordBox, PASSWORD)) { outtextxy(DIALOG_X + 50, DIALOG_Y + 250, "登录成功！"); } else { outtextxy(DIALOG_X + 50, DIALOG_Y + 250, "用户名或密码错误！"); } } else { // 处理键盘输入 HandleInputBox(&usernameBox, ch); HandleInputBox(&passwordBox, ch); DrawInputBox(&usernameBox); DrawInputBox(&passwordBox); } } // 关闭图形窗口 closegraph(); return 0; } ``` 这个简单的示例代码实现了一个用户登录界面，包括用户名和密码的输入框和一个登录按钮。用户可以在输入框中输入用户名和密码，按下回车键登录，如果用户名和密码正确，则显示“登录成功”，否则显示“用户名或密码错误”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值