-
html输入框是一条横线,html把输入的文本框变成一个下横线css样式
2021-06-10 16:47:33这个一个非常简单的效果，就是将input的输入框，变成一条横线的效果，这样在一些界面处理中，更加的好，而不是一个输入框。htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"...展开全文这个一个非常简单的效果，就是将input的输入框，变成一条横线的效果，这样在一些界面处理中，更加的好，而不是一个输入框。html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
form元素特殊效果#text{
border-bottom:#666 1px solid;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;}
#submit{
/*
border: #666 1px solid;显示边框*/
border:0;
line-height:20px;
background-color:transparent;}
本文作者： Liaodeity
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！
-
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2020-10-21 11:04:49主要介绍了JavaScript实现横线提示输入验证码随输入验证码输入消失的方法，非常实用，在微信开发中经常会用到，需要的朋友可以参考下 -
一个注册页面（横线上输入信息（input）及其交互）
2017-08-17 15:34:24横线上输入信息（input），从一个注册页面谈起展开全文效果图：
交互是：默认第一行黄色，点击一行哪一行就变为黄色
动工：拿到效果图的时候，第一反应是用ul，li来布局后来布局完了之后发现点的时候没光标啊！只考虑了布局没考虑到输入的问题。。
so返工1> 解决输入，引入input框
代码结构：学号/工号文字标签，一个input框，加下面一条横线；
此时提一下，input的样式，去掉input的边框border及获取焦点的时候去掉光亮边框;input{border: 0px;outline: none;} //去掉input的边框border及获取焦点的时候去掉光亮边框;交互实现：
当此行input获取焦点的时候，寻找它的兄弟节点，文字标签和横线都变色。
寻找兄弟节点：<input onfocus="changeColor(this)" onblur="init(this)" /> function getPrevElement(node){ if(node.nodeType == 1){ return node; } if(node.previousSibling){ return getPrevElement(node.previousSibling); } return null; } function getNextElement(node){ if(node.nodeType == 1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; } var oP = getPrevElement(obj.previousSibling); var oLine = getNextElement(obj.nextSibling);等写好交互时，发现，左边的文字标签，右边的验证码图片，布局要配合移动端的自适应，而我当时是拿着设计图的长宽像素直接写的额（这样导致的结果是安卓那边集成之后发现打开这个就如同打开网页一样小！input框输入还会页面放大的那种==）。于是又辗转调css，全部换成百分比，字体也要跟着百分比。
<-此乃返工2对了提一下，放大了input框之后，发现input框的光标好小[相对]！而当时”身在此山中的我”一心想着的是改变光标的位置、大小。。后来才恍悟，设置input里的字体大小就可以了，光标随着变换。
然而此时问题又出现了
我这样的交互方式有个致命的bug就是，用户只能点击input框所在的点才能获取焦点，而人们习惯性的是点击绿色框所在的区域均可获取到输入的焦点。
此时解决方案可以是在绿色的整个包裹层加个监听事件。然而我懒（吗？+安卓那边的人有点强势要得急加他们说他们的交互方式是另一种
我一看，这简单啊！于是就全部改了&&
他们的交互是：
点击那一行输入的时候那一行原本的提示字（教务处密码等）都不见了。
很明显这个是input，提示字是input自带的placeholder。然后设置下placeholder样式、显现即可html： <body> <input type="text" name="number" placeholder="学号/工号" class="active" style="margin-top: 100px;"> <input type="password" name="password" placeholder="教务处密码" > <div class="getcode"> <input type="text" name="code" placeholder="验证码"> <span class="codepic"></span> </div> <a class="Btn">注 册</a> <div class="footer"> iSWUST @2017 </div> </body>js代码：
var arrInput = document.getElementsByTagName("input"); var arrText =["学号/工号","教务处密码","验证码"]; for(var i = 0;i<arrInput.length;i++){ arrInput[i].index=i; arrInput[i].onfocus=function(){//获取焦点 arrInput[0].className="";//将默认的第一行亮色去掉 this.className = "active"; } arrInput[i].onblur=function(){//失去焦点 this.placeholder = arrText[this.index]; this.className = ""; } }交互的active，点到哪一行哪一行加个active的classname；
.active{border-bottom: 2px solid #FFCA28;}对了，还有input里面placeholder的样式：
input::-webkit-input-placeholder{color:lightgray;font-size: 46px;} input.active::-webkit-input-placeholder {color: #FFCA28;}最后，over
最最后，没想到一个简简单单的页面如此简洁的元素构成的页面都这么多讲究，平时应该多练习，还有很重要的是，动手写之前就应该想清楚些，页面的构造。要有下棋的意识，走完这一步要想到下好几步。
-
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2020-12-29 04:30:30最近做微信端的页面遇到了一个之前没有遇到过的一个页面，刚开始放在那没有去写，可是等其他页面都写好的时候，还是得回过头来研究这个页面问题，刚开始我请教了公司的...--黑色横线框--> <div class=pass-line -
如何在WPS中给一组字母上方添加一个横线
2020-03-25 19:02:153.将输入法切为英文输入法，下方写一组字母，上方输入横线时，一直按住"shift"+键盘左上方"-”，直到完全覆盖字母为止. 4.点击文件—>退出并返回到XXX 这样就完成啦!!! 效果图如下： ...展开全文1.点击要插入的字母的位置，点击上方菜单中“插入”，点击“公式”；
2.找到字母上带横线的格式
3.将输入法切为英文输入法，下方写一组字母，上方输入横线时，一直按住"shift"+键盘右上方"-”，直到完全覆盖字母为止.
4.点击文件—>退出并返回到xxx
这样就完成啦!!!
效果图如下：
-
制作横线输入的文本框.
2007-10-08 11:40:00一.运行效果如下图: 二.实现原理.因为类似TextBox与RichTextbox之类的复杂文本显示控件,其ONPAINT方法似乎是被屏蔽了,它们被统一做了处理,而不让用户做过多的干涉.所以这里考虑在Wndpro方法中监视paint消息,然后做...展开全文一.运行效果如下图:
二.实现原理.
因为类似TextBox与RichTextbox之类的复杂文本显示控件,其ONPAINT方法似乎是被屏蔽了,它们被统一做了处理,而不让用户做过多的干涉.所以这里考虑在Wndpro方法中监视paint消息,然后做绘制线条处理.
三.源代码.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Text;
using System.Windows.Forms;namespace JcsControlLibrary
{
public partial class JcsLineTextBox : TextBox
{
public JcsLineTextBox()
{
InitializeComponent();
this.Width = 100;
this.BorderStyle = BorderStyle.None;
}
private Color _linecolor = Color.Black ;
/// <summary>
/// 线条颜色
/// </summary>
public Color LineColor
{
get
{
return this._linecolor;
}
set
{
this._linecolor = value;
this.Invalidate();
}
}
private const int WM_PAINT = 0xF;
protected override void WndProc(ref Message m)
{
base.WndProc(ref m);
if (m.Msg == WM_PAINT)
{
DrawLine();
}
}
private void DrawLine()
{
Graphics g = this.CreateGraphics();
using(Pen p = new Pen(this._linecolor ))
{
g.DrawLine(p,0,this.Height -1 ,this.Width ,this.Height -1);
}
}
}
}
-
word中如何插入一个横线
2010-09-13 11:00:00（1）如果横线不长，可以采用设置下划线的方法：先按一下下划线工具“U”，再根据需要输入几个字符，按一些空格。例如：“姓名”、“学校”后边跟的空白字符下划线。例：姓名 <br /> （2）如果... -
Word中如何快速删除页眉下的横线？教你一招，轻松解决！
2018-10-09 19:37:27例如，如何快速删除页眉下的横线？如何删除文档中的小箭头？如何将Word转为Excel?等等 下面就来和大家分享4个Word常用技巧！ 如何快速删除页眉下的横线 添加页眉页脚容易，想删除可就有点麻烦了！但也不是不可行！... -
实现每四位字符添加一个短横线（考虑用户删除、复制粘贴输入的情况）
2020-12-26 16:27:29比想象中简单很多，刚开始不知道这个方法的时候，纯粹用字符串拼接，条件太多，用下面这个方法就简单很多，此方法可以用在诸多... //如果用户输入了-，需要去除-【全局替换】 val = val.replace(/-/g, ''); //match -
用函数分别打印一条横线，多行
2021-02-21 23:55:40# 需求： 写一个函数打印一条横线 def print_one_line(): # 实现打印一条横线的功能 print("=" * 30) print_one_line() 打印结果： ============================== # 需求: 打印自定义行数的横线 def print_... -
word下横线的线添加的方法
2021-08-17 13:38:19在word中画横线其实就是在word中添加直线，我们可以使用插入直线的方式来在word中画横线，接下来看一看具体步骤吧！ 步骤：点击word菜单栏中的【插入】->点击插图选项卡中的【形状】->在弹出的窗口中点击... -
Android 验证码输入（底部带横线）
2020-05-29 16:10:341.先自定义一个类 ，继承RelativeLayout public class VerifyCodeView extends RelativeLayout { private EditText editText; private TextView[] textViews; private static int MAX = 6; private String ... -
坑！人民币符号￥为什么有时候一根横线，有时候两根横线？
2019-04-25 23:29:56在开发过程中遇到了这个问题，界面上需要显示一个人民币符号￥，但别的同事开发的界面，总是显示两根横线，而我开发的界面，有些机器上是两根，有些机器上是一根。 emmmm… 然后我仔细观察了一下，发现，同事和我用... -
Android Study教你快速实现用户输入手机号或身份证号自动添加空格或者横线
2017-01-12 23:46:56前言今天录入手机号时，突然想起之前某款软件曾经弄得是用户输入时，自动添加空格或者横线，感觉体验性很不错，那么这个该怎么实现呢？自己学习了下，下面为大家讲解~首先来一张实体图瞅瞅，不然空口套白狼~程序比较... -
Word中一条删除不掉的单或双横线的解决办法
2019-04-23 17:18:00让人蛋疼的是：这条横线也不能选中，把横线的上一行和下一行之间全部选择，删除，也没用。 你可能会以为是分节符，或分页符，于是调出大纲视图，发现根本找不到这条线。 如果你遇到的情况和上面所描... -
sublime 光标由竖线变下横线
2018-01-29 15:46:00编程时偶尔会突然出现光标突然间由“小竖线”变成“黑块矩形”，网上有说在控制面板中进行设置。由于光标是在使用中突然发生变化，推测是碰到了快捷键，因此断定有快捷键可以修改。后来，无意中碰到了“Insert”键，... -
EditText每四位自动添加空格或者横线（银行卡输入格式，验券格式）
2016-05-24 09:49:26EditText每四位自动添加空格或者横线（银行卡输入格式，验券格式）最近公司有个项目，需要这种验券格式1234-5678-1234；为了提高用户体验，要求用户只输入数字就可以了，横线没四位自动补全；同样，输入银行卡号时也... -
网络状态是一条横线 连接不上网络的解决办法
2020-08-21 21:53:201. 问题描述 在一次重置了win10操作系统之后，网络状态 为一条横虚线，不能连接网络。 2.解法方法 win+R 运行 services.msc ...在网络正常的计算机上 winr + R 输入 regidit 在注册列表编辑器中找到 EventLog文件夹， -
HBuilder X编辑器中光标变成下横线的问题
2021-03-20 17:57:25今天在使用HBuilder X编辑器写代码的时候，遇到了这样的一个问题，鼠标点击的停留的位置 变成了下划线 敲代码的时候十分的不方便，一部小心就把后面的代码替代...按下键盘上的inster键即可！ 这样就方便很多啦 -
Word中一条删除不掉的单或双横线问题的解决之道
2013-03-25 11:16:17而且这条横线也不能选中，把横线的上一行和下一行之间全部选择，删除，也没用。 如果你遇到的情况和上面所描述相符，那这条横线可能是word自动添加上去的，不知道朋友注意没有，在word中输入三个“-”（减号）或“=... -
VUE Element-ui输入手机号加横线（三四四）或增加空格
2019-01-16 16:41:55一、问题描述： 项目中需要用到手机号每添加后增加空格或增加横线。三四四的逻辑。那么，在vue，element-ui 组件中，如何实现呢。 二、效果图： 三、实现代码： <template slot="mobile"... -
请教!java方法名被一条横线划掉怎么去掉？
2020-03-17 10:02:42如图所示，idea上打出这些方法名一直会有横线划掉显示。 每次都无法直接回车打出来，要手动选择。 好像软件自动屏蔽掉，有点麻烦。 问下有没有大佬知道怎么解决这个问题。 多谢啦！！！ 用的什么工具，建议使用...
