在我們程序員日常的工作當中，經常會遇到一些讓人頭疼的槽點，小編也是經常遇到，今天就給大家分享如何讓輸入框聽話的技巧。

問題探究

1. ios中，輸入框獲得焦點時，頁面輸入框被遮蓋，定位的元素位置錯亂：

當頁input存在于吸頂或者吸底元素中時，用戶點擊輸入框，輸入法彈出后，fiexd失效，頁面中定位好的元素隨屏幕滾動。

針對這個問題，我們一起來看下以下幾種方案：

方案一： Web API 接口 ：scrollIntoView 的應用，將input輸入框顯示在可視區域。

JavaScript

// 輸入框獲得焦點時，元素移動到可視區域

inputOnFocus(e) {

setTimeout(function(){

e.target.scrollIntoView(true);

// true:元素的頂端將和其所在滾動區的可視區域的頂端對齊; false:底端對齊。

},200); // 延時==鍵盤彈起需要時間

}

一行代碼，輕松搞定，輸入框就乖乖的出現在你眼前了。

不過有點小缺陷：頁面過長時，由于fixed失效，輸入框依然也會跟著頁面滑走。

這時，我們需要一個固定的輸入框……

方案二：在輸入框獲得焦點時，將頁面滑動到最底部，避免fixed導致的頁面亂飛，并且保證input在最底部。

JavaScript

var timer；

// 輸入框獲得焦點時，將元素設置為position:static，設置timer

inputOnFocus(e) {

e.target.style.className='input input-static';

timer=setInterval(

function() {

document.body.scrollTop=document.body.scrollHeight

}, 100)

}；

// 輸入框失去焦點時，將元素設置為 position:fixed，清除timer

inputOnbulr(e) {

e.target.parentNode.className='input input-fixed';

clearInterval(timer)

}；

效果如下圖：

當獲得焦點彈出虛擬鍵盤后，input輸入框會一直緊貼鍵盤頂部。如果，你的頁面彈出輸入法后不需要滑動查看其他內容，那么你對這種方案應該很中意。

But，可能你做的是一個類似聊天的頁面，需要在回復時，查看歷史消息，那么，請你繼續往下看

方案三：將頁面進行拆分: 頁面（main）=內容（sectionA） + 輸入框（sectionB）+ 其他（sectionOther）

原理 ：

main.height=window.screen.height ;

sectionA 絕對定位，進行內部滾動 overflow-y：scroll ;

sectionB 可保證在頁面最底部。

CSS

.main { position: relative; height: 100%; }

.sectionA { box-sizing: border-box; padding-bottom: 60px; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch //為了使滾動流暢，sectionA 添加屬性 }

.sectionB { position: absolute; height: 60px; overflow: hidden; left: 0; right: 0; bottom: 0; }

純css3打造，可以滾動，可以固定位置,基本滿足大部分布局需要。

2. IOS中單行輸入框輸入內容長被遮蓋，不能顯示全部，且不能左右滑動。

這個是IOS的一個bug，可以考慮用 textarea 替換 input，設置一行的高，進行上下滾動查看。（其他方案可以參看下面 第 6 點）

3. 獲得焦點時，光標消失或錯位：

-webkit-user-select:none 導致 input 框在 IOS 中無法輸入，光標不出現，設置如下

JavaScript

user-select:text;

-webkit-user-select:text;

利用scrollIntoView 使當前元素出現到指定位置，避免光標錯位，設置如下：

JavaScript

e.target.scrollIntoView(true);

e.target.scrollIntoViewIfNeeded();

4. 進入頁面如何自動獲取焦點，彈出軟鍵盤？

· 添加 autofocus 屬性 支持自動獲得焦點

· 觸發 focus() 事件

5.隨文字輸入，輸入框寬度自適應。

JavaScript

onkeyPress(e) {

const testLength=e.target.value.length;

e.target.style.width=`${testLength*8+10}px`

}

這種方案基本滿足自動獲取效果。

testLength 8 英文字符，testLength 16中文字符， +10為后邊光標預留位置。

這種方案顯然不適用于對精確度有很高要求的需求。

6. 介紹一個屬性：contenteditable，模擬輸入時動態獲取寬高

（1）div設置contentditable=true 可以將此元素變成可輸入狀態。

1

<div class="inputContent" contenteditable="true" ></div>

（2）想要變成input輸入框，利用css模擬輸入框的樣式

CSS

.inputContent{

color:#444;

border:#999 solid 1px;

border-radius: 3px;

padding: 5px 10px;

box-sizing: border-box;

min-width:50px;

max-width: 300px;

background: #ffffff;

}

這里配合min-width，max-width 效果更真實。

（3）點擊div可以彈出軟鍵盤，但是無法輸入內容，需要設置屬性，如下

CSS

.inputContent{

user-select:text;

-webkit-user-select:text;

}

這樣就完成一個可以根據獲取輸入內容來動態來調節寬高。

還可以利用js模擬placeholder等，這里就不展開了

7.其他問題及解決

· 輸入框獲得焦點可彈出軟鍵盤，卻沒有光標閃爍，也無法正常輸入。-webkit-user-select:none 導致的，可以這樣解決

CSS

*:not(input,textarea) {

-webkit-touch-callout: none;

-webkit-user-select: none;

}

· input 自定義樣式

CSS

// 使用偽類

input::-webkit-input-placeholder,

input::-moz-placeholder,

input::-ms-input-placeholder {

...style

text-align: center;

}

好了,就寫到這了，希望看過后對你能有幫助。別忘記分享給身邊的朋友，一起來學習，記得要關注哦，小猿圈會持續分享一些關于web學習的文章。

例

將 HTML 網頁中的文本進行水平居中處理：

<center>這個文本居中對齊。</center>

瀏覽器支持

所有主流瀏覽器都支持 <center> 標簽。

標簽定義及使用說明

HTML5 不支持 <center> 標簽。請用 CSS 代替。

在 HTML 4.01 中，<center> 元素 已廢棄。

<center> 對其所包括的文本進行水平居中。

提示和注釋

提示：請使用 CSS 樣式來居中文本！在 CSS 教程中您能了解到更多關于居中文本的細節。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <center> 標簽，HTML 4.01 已廢棄 <center> 標簽。

標準屬性

在 HTML 4.01 中，<center> 標簽支持如下標準屬性：

如需完整的描述，請訪問標準屬性。

事件屬性

在 HTML 4.01 中，<center> 標簽支持如下事件屬性：

如需完整的描述，請訪問事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

HTML DOM 事件

HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。

事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。

提示： 在 W3C 2 級 DOM 事件中規范了事件模型。

HTML DOM 事件

DOM： 指明使用的 DOM 屬性級別。

鼠標事件

鍵盤事件

框架/對象（Frame/Object）事件

表單事件

剪貼板事件

打印事件

拖動事件

多媒體（Media）事件

動畫事件

過渡事件

其他事件

事件對象

常量

屬性

方法

目標事件對象

方法

事件監聽對象

方法

文檔事件對象

方法

鼠標/鍵盤事件對象

屬性

方法

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！