input输入框_input输入框禁止输入 - CSDN
精华内容
参与话题
  • 修改input输入框的样式

    万次阅读 2018-06-08 10:45:15
    我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢? 下面我们来写个简单的表单 <form action=""
    原文地址为:修改input输入框的样式

    我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢?

    下面我们来写个简单的表单

    <form action="" method="get">
        <div class="input_control">
            <input type="text" class="form_input" placeholder="Enter vendor key here"/>
        </div>
        <div class="input_control">
            <input type="text" class="form_input" placeholder="Enter room name here"/>
        </div>
        <div class="input_control">
            <input type="text" class="form_input" placeholder="Input key here if use encryption"/>
        </div>
        <div class="input_control">
            <a id="btn1"><b></b>Join</a>
        </div>
        <div class="input_control">
            <a id="btn2"><b></b>Video Options</a>
        </div>
    </form>

    首先要将input输入框的默认样式去掉

    -web-kit-appearance:none;
      -moz-appearance: none;
    然后我们加上边框和圆角,并设置input的高度和字体大小和颜色:

    font-size:1.4em;
    height:2.7em;
    border-radius:4px;
    border:1px solid #c8cccf;
    color:#6a6f77;
    然后将input输入框的轮廓去掉:

    outline:0;
    这样我们的输入框就差不多好了,input样式完整代码如下:

    .input_control{
      width:360px;
      margin:20px auto;
    }
    input[type="text"],#btn1,#btn2{
      box-sizing: border-box;
      text-align:center;
      font-size:1.4em;
      height:2.7em;
      border-radius:4px;
      border:1px solid #c8cccf;
      color:#6a6f77;
      -web-kit-appearance:none;
      -moz-appearance: none;
      display:block;
      outline:0;
      padding:0 1em;
      text-decoration:none;
      width:100%;
    }
    input[type="text"]:focus{
      border:1px solid #ff7496;
    }

    效果如下图:

    通过上图的input样式我们可以看出,虽然比默认样式好看了许多,但是还有一些问题,比如placeholder的默认字体颜色是灰色,看起来有点浅,我们继续修改样式,那么如何修改placeholder的样式呢?我们加上如下代码即可:

    ::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #6a6f77;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #6a6f77;
    }
    input::-webkit-input-placeholder{
      color: #6a6f77;
    }
    修改之后样式如下图:


    截图上input的边框有点虚,实际效果比这个好,这样就完成了一个简单漂亮的表单了。


    转载请注明本文地址:修改input输入框的样式
    展开全文
  • Input输入框内提示效果

    万次阅读 2017-12-26 17:05:39
    Input输入框内提示效果 要想在input输入框内实现带提示信息的效果,并在输入数据时提示信息自动消失。我们将用到: placeholder属性:提供可描述输入字段预期值的提示信息。  该提示会在输入字段为空时显示,并...

    Input输入框内提示效果

    要想在input输入框内实现带提示信息的效果,并在输入数据时提示信息自动消失。我们将用到:
    placeholder属性:提供可描述输入字段预期值的提示信息。
                  该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
    注意:
    placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。
          如果input的text属性值为search时,当我们向输入框输入值时,最右端会有一个叉号。如下图:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <script type="text/javascript">
    
    </script>
    <body>
    	<input type="search" name="user_search" placeholder="请输入"/> 
    	
    	<input type="text" name="user_text" placeholder="请输入" />   
    </body>
    </html>


    展开全文
  • html input文本输入框的一些总结

    千次阅读 2018-03-23 12:17:09
    input name="key" type="text" id="key" value="关键词" size="30" onmouseover=this.focus();this.select(); onclick="if(value==defaultValue){value...

    1、选中去除文本框文字,离开后显示原有文字:

    <input name="key" type="text" id="key" value="关键词" size="30"   
          onmouseover=this.focus();this.select();   
          onclick="if(value==defaultValue){value='';this.style.color='#000'}"   
          onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999" />

    2、选中后方可编辑:

    <input type="checkbox" name="tpbox" value="1" 
    onclick="if(this.checked) {txtNo.disabled=false}else{txtNo.disabled=true}">
    你一定要幸福,我会好好的!你的姓名:
    <input type="text" name="txtNo" size="20" value="选中前面的选项方可编辑" disabled>

    3、点击链接后方可编辑:

    <a href="#" onclick="username.readOnly=false;alert('你好,欢迎使用!')">先点击我哦!</a>
    你的姓名:<input id="username" value="--请输入--" size="30" readOnly>

    4、输入框从中间输入:

    <input type="text" name="mid" style="text-align:center;">

    5、输入框变色:

    <input type="text" size="20" style="background-color:#FFFFFF"
            onfocus="style.backgroundColor='#FFFF00'"
            onblur="style.backgroundColor='#FFFFFF'">

    6、输入框只能输入数字(用的是正则表达式):你的年龄,电话:

    <input onkeyup="value=value.replace(/[^\d]/g,'') "
    onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

    7、输入框只能输入中文(用的是正则表达式):你的中文名:

    <input onkeyup="value=value.replace(/[ -~]/g,'')" 
    onkeydown="if(event.keyCode==13)event.keyCode=9">

    8、只能输入英文和数字(用的是正则表达式):

    你的昵称:<input onkeyup="value=value.replace(/[\W]/g,'') "    
    onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
    onkeydown="if(event.keyCode==13)event.keyCode=9">

    9、输入框不能编辑,但表单可以获得输入框内的值:

    <input type="text" value="afreon" onclick="alert('总和不能编辑!');" onfocus="this.blur()" />
    <input type="text" value="afreon" onclick="alert(this.value);" readonly />
    <input value="不可修改"  readonly= "true" type="text"/>//:字体颜色为黑体

    10、输入框不能编辑,并且表单不能获得输入框内的值

    <input value="不可修改" disabled="disabled"  type="text"/>//:字体颜色为灰体

    11、输入框禁止输入法:

    <input onpaste="return false" style="ime-mode:disabled">

    来源:https://www.jianshu.com/p/04499e051147


    展开全文
  • input框的输入事件

    万次阅读 2020-06-05 10:46:05
    input框只能输入数字。 问题: 只判断e.keyCode的情况下,在中文输入法中出现了e.keyCode均为229的情况,不论输入数字还是其他。 解决: 修改input框的type为number,但会出现默认样式,并且并不能真的限制数字...

    要求:

    input框只能输入数字。

    问题:

    只判断e.keyCode的情况下,在中文输入法中出现了e.keyCode均为229的情况,不论输入数字还是其他。

    解决:

    修改input框的type为number,但会出现默认样式,并且并不能真的限制数字。(在中文输入法下还是能输入中文)

    1. 中文输入法

    在中文打出的字母没有真正的键入input框的时候是会触发事件的,但再点击回车d不会被输入input框。

    2. 英文输入法

    输入d之后并没有显示,但是出现了奇怪的现象,onkeypress事件的keyCode却显示的很奇怪,它识别成了数字键盘上的4。

    input框有默认样式,遂换方法。

    不过这里的input框type为number的时候,复制粘贴也是不会显示中文的,问题只在未键入时会触发。

    2. 采用正则:

    在代码里拦截将非数字替换为空。

    text.value = text.value.replace(/[^\d]/g,'');

    但后来发现这样不能输入符号,所以换成了:

    text.value = text.value.replace(/[^-\d]/g,'');

    那么来看看这次的反应:

    中文输入法下,onkeydown的keyCode还是229。

    空格之后没有被输入:

    中文输入法下输入1:我点击的是右边小键盘的1,down和up事件都识别对了,但press却识别成了字母上面的1。

    这次点击字母上面的1:就全都是49,识别对了。

    试试特殊键:

    回车不会触发oninput事件:

    alt:只有down和up事件

     

    空格:

    tab键:按下后输入框失去焦点并且只触发了down事件。

    capslock:就是切换大小写那个按键,也只有down和up事件。

    shift:

     

    结论:(chrome下)

    1. 中文输入法下不会触发onkeypress事件。
    2. 在没有真正被键入输入框的时候,keyCode与charCode都会是undefined,而which是0。
    3. 中文输入法下onkeydown的keyCode及which都是229,charCode=0,但onkeyup可以得到真正的keyCode。
    4. ctrl只会触发onkeydown事件。
    5. alt,capslock,shift只会触发onkeydown和onkeyup事件。
    6. 空格都会触发。
    7. 用onkeypress监听回车是不可取的,因为它根本不会触发。
    8. onkeypress谨慎使用,因为它监控的并不准确,但如果只是监控数字不用那么精确的话就可以。
    9. 事件的执行顺序依次是:onkeydown --> onkeypress --> oninput --> onkeyup。

    对于ff和ie表现可能会不一样,具体需要再监控。

    展开全文
  • input输入框

    2019-07-10 08:36:43
    1. 网页按钮的特殊颜色 ...inputtype=buttonname="Submit1"value="**"size='10'class='s02'style="background-color:#ebcf16"> 2. 鼠标移入移出时颜色变化 <inputtype="submit"value="**"name="B1"o...
  • input标签边框

    千次阅读 2019-06-09 15:22:04
    如何设计一个好看的页面也是很重要的一部分 需要设计一个好看的页面也少不了各式各样的标签 下面我来给大家说一个标签也是页面十分重要的一个标签那就是input input标签有如下几个属性 name属性 该属性用于指定用来...
  • Input输入框的各种样式

    千次阅读 2019-02-01 00:11:43
    输入框景背景透明: 鼠标划过输入框输入框背景色变色: &amp;lt;INPUT value=&quot;Type here&quot; NAME=&quot;user_pass&quot; TYPE=&quot;text&quot; SIZE=&quot;29&quot...
  • 微信小程序基础之input输入框控件

    万次阅读 热门讨论 2016-12-20 11:32:06
    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用。首先主页面中将登录的...
  • 修改input输入框的样式【简单demo】

    万次阅读 2020-02-24 20:23:32
    修改input输入框的样式很简单,我们只需要把input的样式都去除掉,然后弄个假的input覆盖即可,与我们之前做的复选框类似。 下面开始先做三个input输入框【html代码】: <div class="input_control"> <...
  • 1、如下图 input输入框会有输入缓存,之前输入的内容会有下拉提示,如何才能去掉输入缓存呢 2、添加autocomplete=“off”,input输入框的输入缓存就会去掉如下图,右边input输入框获取到光标时,不再有之前的历史...
  • 一 先说一下普通input输入框保存历史记录的解决方法 在input输入框中加autocomplete="off"属性 可去除历史记录 二element的el-input 输入框 填充历史记录 解决方法 浏览器会默认将已保存的账号密码 填充到input ...
  • input输入框禁止输入的几种方式

    万次阅读 多人点赞 2018-04-11 14:15:35
    有时候我们在处理input输入框的时候,特别是在修改或者查看一些数据的时候,不希望去修改里面的值需要进行对input框进行禁止输入,那么以下几种方式就参考一下: 第一种:&lt;input type="text" name=&...
  • input输入框添加键盘事件 1.普通input输入框添加键盘事件,keyup/keydown,假设打算按下enter键。 <el-input placeholder="请输入内容" @keyup.enter.native="methodsName"></el-input> 除了那几个特殊...
  • 有关input输入框内容改变后的触发事件,也是今天遇到的问题。我使用时间插件为输入框填充内容,想实现输入框内容改变后执行相应的方法,发现使用change方法没有反应。百度了半天,最后才发现问题所在。我这边考虑两...
  • input输入框的光标定位的问题  在给input输入框赋值的时候,或者在我之前写模拟下拉框js组件的时候,时不时会碰到光标的小bug问题,比如键盘中的 上移或者下移操作,在浏览器中光标会先移到最前端,当值赋值到输入...
  • input 输入框宽度自适应

    千次阅读 2019-02-18 18:22:59
    input 输入框宽度自适应&lt;/title&gt; &lt;body&gt; &lt;input id="test" onkeypress="changeWidth()" type="text"/&gt; &lt;/body&gt; &lt;...
  • 相信有很多刚进入小程序这一行的时候会遇到很多的坑,其中有一个就是怎么都获取不到input输入框里面的内容,今天来再说一下这个value如何获取到。 小程序input组件上有一个方法上有一个方法叫做bindinput 现在来...
  • 将一个input输入框的值写入另一个input输入框 ` # 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ...
  • ios移动端input输入框常常会出现失去焦点、焦点位置错误,出现焦点缺输入失败等问题。 ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在于吸顶或者吸底元素中时,用户点击输入框,...
  • input输入框是只能输入数字

    万次阅读 2017-07-24 17:37:03
    input输入框有type=number这个属性, 但是这个功能里面是能够输+ -符号的,这两个符号在手机端又是很可能会按到的按钮,我在项目中用到的是正则验证, html页面代码: js代码: //判断只能输入数字,非...
1 2 3 4 5 ... 20
收藏数 134,052
精华内容 53,620
关键字:

input输入框