【CSS】input 框的一些事情

1.input框光标太长与不居中的问题

如果input框height:40px 为了字体垂直居中line-height也设为40px

问题来了，这样光标在刚刚focus时候是占据整个input框并且输入的时候会顶到上边框，与下边框有距离，看起来很诡异。

为了解决这个问题，最好的方法就是input的height设为字体高度，然后在用padding来填充所需高度，这样就可以完美解决了~

2.placeholder内容点击时候清空

这个功能虽然并没有什么卵用，可是产品要求，也只能去实现，直接上代码：

  <input class="codeInput" type="text" name="exCode" placeholder="请输入红包口令" onfocus="this.placeholder = ''" onblur="this.placeholder = '请输入红包口令'" maxlength="8"/>

3.实时监听input内容的变化。

需要实现的效果是输入验证码到8位时候，提交按钮改变颜色，不足八位时候就恢复暗色。change事件只有在光标离开时候才被触发，keyup事件在iPhone与某些安卓机时候对于粘贴到输入框的字符并无响应，经过测试只有input事件比较完美的解决了需求。

function inputChange(){

	$(".codeInput").on("input",function(){

		var codeLength = $(".codeInput").val().length;

		if(codeLength == 8){

			$(".codeVerify").css("color","#fff");

		}else{

			$(".codeVerify").css("color","rgba(255,255,255,.3)")

		}

	})

}

4.iPhone下input默认样式圆角禁用

移动端给input设置的样式都不起作用，wtf！原来全局样式中没有禁用ios的默认圆角样式

input {

	-webkit-appearance: none;

}

完美解决~

巴特西

【CSS】input 框的一些事情

1.input框光标太长与不居中的问题

2.placeholder内容点击时候清空

3.实时监听input内容的变化。

4.iPhone下input默认样式圆角禁用

最新文章

热门文章