精华内容
下载资源
问答
  • 这个个非常简单的效果,就是将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实现横线提示输入验证码随输入验证码输入消失的方法,非常实用,在微信开发中经常会用到,需要的朋友可以参考
  • 横线输入信息(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
    最最后,没想到一个简简单单的页面如此简洁的元素构成的页面都这么多讲究,平时应该多练习,还有很重要的是,动手写之前就应该想清楚些,页面的构造。要有下棋的意识,走完这一步要想到下好几步。

    展开全文
  • 最近做微信端的页面遇到了个之前没有遇到过的个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚开始我请教了公司的...--黑色横线框--> <div class=pass-line
  • 3.将输入法切为英文输入法,下方写组字母,上方输入横线时,一直按住"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转为Excel?等等 下面就来和大家分享4个Word常用技巧! 如何快速删除页眉横线 添加页眉页脚容易,想删除可就有点麻烦了!但也不是不可行!...
  • 比想象中简单很多,刚开始不知道这个方法的时候,纯粹用字符串拼接,条件太多,用下面这个方法就简单很多,此方法可以用在诸多... //如果用户输入了-,需要去除-【全局替换】 val = val.replace(/-/g, ''); //match
  • # 需求: 写个函数打印横线 def print_one_line(): # 实现打印横线的功能 print("=" * 30) print_one_line() 打印结果: ============================== # 需求: 打印自定义行数的横线 def print_...
  • 在word中画横线其实就是在word中添加直线,我们可以使用插入直线的方式来在word中画横线,接下来看看具体步骤吧! 步骤:点击word菜单栏中的【插入】->点击插图选项卡中的【形状】->在弹出的窗口中点击...
  • 1.先自定义个类 ,继承RelativeLayout public class VerifyCodeView extends RelativeLayout { private EditText editText; private TextView[] textViews; private static int MAX = 6; private String ...
  • 在开发过程中遇到了这个问题,界面上需要显示个人民币符号¥,但别的同事开发的界面,总是显示两根横线,而我开发的界面,有些机器上是两根,有些机器上是根。 emmmm… 然后我仔细观察了一下,发现,同事和我用...
  • 前言今天录入手机号时,突然想起之前某款软件曾经弄得是用户输入时,自动添加空格或者横线,感觉体验性很不错,那么这个该怎么实现呢?自己学习了,下面为大家讲解~首先来一张实体图瞅瞅,不然空口套白狼~程序比较...
  • 让人蛋疼的是:这条横线也不能选中,把横线的上行和下一行之间全部选择,删除,也没用。 你可能会以为是分节符,或分页符,于是调出大纲视图,发现根本找不到这条线。 如果你遇到的情况和上面所描...
  • sublime 光标由竖线变下横线

    千次阅读 2018-01-29 15:46:00
    编程时偶尔会突然出现光标突然间由“小竖线”变成“黑块矩形”,网上有说在控制面板中进行设置。由于光标是在使用中突然发生变化,推测是碰到了快捷键,因此断定有快捷键可以修改。后来,无意中碰到了“Insert”键,...
  • EditText每四位自动添加空格或者横线(银行卡输入格式,验券格式)最近公司有个项目,需要这种验券格式1234-5678-1234;为了提高用户体验,要求用户只输入数字就可以了,横线没四位自动补全;同样,输入银行卡号时也...
  • 网络状态是横线 连接不上网络的解决办法

    万次阅读 多人点赞 2020-08-21 21:53:20
    1. 问题描述 在次重置了win10操作系统之后,网络状态 为条横虚线,不能连接网络。 2.解法方法 win+R 运行 services.msc ...在网络正常的计算机上 winr + R 输入 regidit 在注册列表编辑器中找到 EventLog文件夹,
  • 今天在使用HBuilder X编辑器写代码的时候,遇到了这样的个问题,鼠标点击的停留的位置 变成了下划线 敲代码的时候十分的不方便,部小心就把后面的代码替代...按键盘上的inster键即可! 这样就方便很多啦
  • 而且这条横线也不能选中,把横线的上行和下一行之间全部选择,删除,也没用。 如果你遇到的情况和上面所描述相符,那这条横线可能是word自动添加上去的,不知道朋友注意没有,在word中输入三个“-”(减号)或“=...
  • 、问题描述:  项目中需要用到手机号每添加后增加空格或增加横线。三四四的逻辑。那么,在vue,element-ui 组件中,如何实现呢。 二、效果图: 三、实现代码: &lt;template slot="mobile"...
  • 如图所示,idea上打出这些方法名一直会有横线划掉显示。 每次都无法直接回车打出来,要手动选择。 好像软件自动屏蔽掉,有点麻烦。 问有没有大佬知道怎么解决这个问题。 多谢啦!!! 用的什么工具,建议使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,764
精华内容 16,305
关键字:

下一横线怎么输入