當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
原生JS动态计算输入框文本内容的宽度，当内容宽度超过输入框的宽度时可控
生活随笔
收集整理的這篇文章主要介紹了
原生JS动态计算输入框文本内容的宽度，当内容宽度超过输入框的宽度时可控
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求場景：左邊輸入框輸入內容，右邊輸入框用placeholder展示，當placeholder的內容寬度超過右邊輸入框的寬度時，placeholder強行替換為“請選擇”
注意事項：1、左右輸入框的大小、樣式都無關；
2、實際業務中右邊輸入框的大小樣式是隨機的，所以示例代碼中右邊輸入框加了左右不等的內邊距，并且監聽了瀏覽器窗口大小的變化，而具體的業務開發時右邊輸入框的大小是隨機確定的，大小一般不會變化，所以無需監聽瀏覽器窗口大小改變事件。
完整的示例代碼：
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">input {border: 1px solid gray;width: 20%;}#input2{padding-left: 10px;padding-right: 2px;width: 20%;}</style> </head> <body><input id='input1' type="text" name="title" oninput="onc()" /><input id='input2' type="text" name="userInput"><script>function textSize(fontSize,fontFamily,text){var span = document.createElement("span");span.id = 'referenceSpan'var result = {};result.width = span.offsetWidth;result.height = span.offsetHeight;span.style.visibility = "hidden2";span.style.fontSize = fontSize;span.style.fontFamily = fontFamily;span.style.display = "inline-block";var isExists = document.getElementById("referenceSpan");if (isExists) {document.body.removeChild(isExists);}document.body.appendChild(span);if(typeof span.textContent != "undefined"){span.textContent = text;}else{span.innerText = text;}result.width = parseFloat(window.getComputedStyle(span).width) - result.width;result.height = parseFloat(window.getComputedStyle(span).height) - result.height;document.body.removeChild(span);return result;}window.onc = function onchange(){let input1 = document.getElementById('input1');let input2 = document.getElementById('input2');let placeholder = '請選擇' + input1.value;let cStyle = window.getComputedStyle(input2);let size = textSize(cStyle.fontSize,cStyle.fontFamily, placeholder);console.log(size.width, cStyle.width)if (size.width > parseFloat(cStyle.width)) {console.log("你輸入的標題太長了",parseFloat(cStyle.width));input2.placeholder = '請選擇';}else {input2.placeholder = placeholder;}}window.onresize = function(e){window.onc();}</script> </body> </html>總結
以上是生活随笔為你收集整理的原生JS动态计算输入框文本内容的宽度，当内容宽度超过输入框的宽度时可控的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tshark 小技巧
- 下一篇： 招行信用卡取现手续费和利息 别被手续费给