原生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动态计算输入框文本内容的宽度，当内容宽度超过输入框的宽度时可控相关推荐

原生js动态为table追加html,JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...
移动端布局js动态计算rem
rem原理: 其实rem布局的本质是等比缩放,一般是基于宽度,通过更改html元素的font-size字体大小,就可以让子元素实际大小发生变化推荐一篇文章: https://segmentfault ...
原生JS动态创建html，实现瀑布流布局-
首先在搭起一台服务器(请求数据用),新建文件夹,打开cmd npm init -y 初始化包配置文件然后下载依赖包npm i mockjs express cors 源代码(服务端server.js ...
js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...
原生js动态实现添加表格数据并某列求和
<table width="600" border="1" cellspacing="0"><thead><t ...
原生js动态添加class
在点击切换的过程中,我们需要给被选中的子选项添加"active",然后让其它子选项删除"active"名. 该怎么做呢? 首先,通过JS取到所有tab的节点 v ...
Swift4 - 动态计算UITableView中tableHeaderView的高度 - 获取子控件高度和宽度
核心 : /// 获取子控件高度func sizeHeaderToFit(view:UIView) {view.setNeedsLayout()view.layoutIfNeeded()let wi ...
第148天：js+rem动态计算font-size的大小，适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...
python爬虫爬取今日头条_Python爬虫实战入门五：获取JS动态内容—爬取今日头条...
之前我们爬取的网页,多是HTML静态生成的内容,直接从HTML源码中就能找到看到的数据和内容,然而并不是所有的网页都是这样的. 有一些网站的内容由前端的JS动态生成,由于呈现在网页上的内容是由JS生成 ...

原生JS动态计算输入框文本内容的宽度，当内容宽度超过输入框的宽度时可控

原生JS动态计算输入框文本内容的宽度，当内容宽度超过输入框的宽度时可控相关推荐

最新文章

热门文章