点击聚焦:document.querySelector(‘input’).focus();
聚焦后执行函数:@focus=setRouter(index);
input框里面的放大镜如何得到?
(1.设置成背景图片,2.位置调整):position: absolute;top: 15px;left: 34px;
让文本框输入的文字距离左边框10px(input{text-indent:10px;}//文本首行缩进10px)这个属性可以移动光标的位置
调整input输入框文字距离(间距) letter-spacing:10px;文本间隔10px
给input提示文本(placeholder)设置样式和距离
input::-webkit-input-placeholder {
color: @fontColor;设置提示字颜色
font-size: 30px;设置提示字大小
position: relative;设置提示字位置向右移动
left: 70px;
}
输入汉字时,没有输入完(拼音也影响)也调用函数的解决方法
goInput () {
let isInput = false;
const search = document.querySelector('input');
const body = document.querySelector('body');
const that = this;
search.addEventListener('touchstart', function () {
that.isFocusing = false;
search.focus();// 此时触发,同时弹出字母键盘 ps:若想要弹出数字键盘给input的type加上tel,如
});
body.addEventListener('touchend', function (el) {
if (el.target.nodeName !== 'INPUT') {
// console.log(el);
search.blur();
that.isFocusing = true;
}
});
search.addEventListener(
'compositionstart', //拼音组成开始
function (e) {
isInput = true;
},
false(阻止冒泡)
);
search.addEventListener(
'compositionend', //拼音组成结束
function (e) {
isInput = false;
if (search.value.length === 0) {
document.querySelector('.mint-searchbar-cancel').innerText = '取消';
} else {
document.querySelector('.mint-searchbar-cancel').innerText = '搜索';
}
},
false
);
search.addEventListener(
'input',
function (e) {
if (isInput) return;
if (this.value.length === 0) {
document.querySelector('.mint-searchbar-cancel').innerText = '取消';
} else {
document.querySelector('.mint-searchbar-cancel').innerText = '搜索';
}
},
false
);
}