本文介绍如何使用CSS去除input边框及默认样式，设置placeholder颜色，以及通过JavaScript实现input焦点变化时按钮样式的动态调整，包括按钮变红效果和回车键触发搜索功能，同时解决iPhone键盘遮挡输入框的问题。
1、去除input边框以及选中时边框 默认样式~
css
input {
border: 0; // 去除未选中状态边框
outline: none; // 去除选中状态边框
background-color: rgba(0, 0, 0, 0);// 透明背景
}
2、input的~placeholder样式
input::-webkit-input-placeholder{
color: #ABABAB;
}
3、input的事件
//输入框有字或者正在输入时,按钮变红色
getInputFocus: function() {
var hoster = this;
$('.prize_input input').on('focus', function() {
if (!$('.inputcode').val() == '') {
$('.prize_btn').addClass('red_btn');
} else {
$('.prize_btn').removeClass('red_btn');
}
})
$('.prize_input input').on('input', function() {
if (!$('.inputcode').val() == '') {
$('.prize_btn').addClass('red_btn');
} else {
$('.prize_btn').removeClass('red_btn');
}
})
}
// 回车键搜索
getKeydown: function(e) {
var hoster = this;
$('.inputcode').keydown(function(e) {
if (e.which == 13) {
$('.prize_btn').trigger('click');
}
})
},
//修复在iphone下，手机键盘遮挡输入框的问题
var ua = navigator.userAgent;
if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
setTimeout(function() {
scrollTo(0, document.body.scrollHeight);
}, 500);
}; //ios终端
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
