泉州建站模板网站,50款app软件免费下载,wordpress修改站点地址,做游戏破解版的网站需求场景#xff1a;左边输入框输入内容#xff0c;右边输入框用placeholder展示#xff0c;当placeholder的内容宽度超过右边输入框的宽度时#xff0c;placeholder强行替换为“请选择”
注意事项#xff1a;1、左右输入框的大小、样式都无关#xff1b;
2、实际业务中… 需求场景左边输入框输入内容右边输入框用placeholder展示当placeholder的内容宽度超过右边输入框的宽度时placeholder强行替换为“请选择”
注意事项1、左右输入框的大小、样式都无关
2、实际业务中右边输入框的大小样式是随机的所以示例代码中右边输入框加了左右不等的内边距并且监听了浏览器窗口大小的变化而具体的业务开发时右边输入框的大小是随机确定的大小一般不会变化所以无需监听浏览器窗口大小改变事件。
完整的示例代码
!DOCTYPE html
html langzh
headmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titleDocument/titlestyle typetext/cssinput {border: 1px solid gray;width: 20%;}#input2{padding-left: 10px;padding-right: 2px;width: 20%;}/style
/head
bodyinput idinput1 typetext nametitle oninputonc() /input idinput2 typetext nameuserInputscriptfunction textSize(fontSize,fontFamily,text){var span document.createElement(span);span.id referenceSpanvar 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
