js实现文本框中内容的放大显示

最新推荐文章于 2022-06-14 17:55:23 发布
最新推荐文章于 2022-06-14 17:55:23 发布
阅读量538 收藏
点赞数 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本框放大</title>
<script>
function $(id){
return document.getElementById(id);
}

function showBigInfo(obj){
var bigObj;
if(!$("bigInfo")){
bigObj=document.createElement("span");
bigObj.setAttribute("id","bigInfo");
bigObj.style.position="absolute";
bigObj.style.border="1px solid #F93";
bigObj.style.borderRadius="2px";
bigObj.style.color="red";
bigObj.style.fontSize="26px";
bigObj.style.fontWeight="bold";
bigObj.style.padding="4px";
bigObj.style.display="none";
document.body.appendChild(bigObj);
obj.onblur=function(){
$("bigInfo").style.display="none";
}
obj.onfocus=function(){
$("bigInfo").style.display="block";
}
}else{
bigObj=$("bigInfo");
}
bigObj.style.display="block";
var str="";
var info=obj.value;
for(var i=0;i<info.length;i+=4){
str+=info.substr(i,4)+" ";
}
bigObj.innerHTML=str; 
if(obj.offsetTop<50){ //放大框在下方显示
bigObj.style.top=(obj.offsetTop+obj.offsetHeight+2)+"px";
}else{ //放大框在上方显示
bigObj.style.top=(obj.offsetTop-bigObj.offsetHeight-2)+"px";
}
bigObj.style.left=(obj.offsetLeft+obj.offsetWidth/2-bigObj.offsetWidth/2)+"px";
}
</script>
</head>

<body>
<br /><br /><br /><br /><br /><br />
<center>

请输入身份证号码：<input type="password" onKeyUp="showBigInfo(this)" maxlength="18" size="30"/>
<br />
请输入身份证号码：<input type="password" onKeyUp="showBigInfo(this)" maxlength="18" size="30"/>
<br />
请输入身份证号码：<input type="password" onKeyUp="showBigInfo(this)" maxlength="18" size="30"/>

</center>
</body>
</html>

 

weixin_33795743
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery文本框文字输入放大特效
06-24
这种特效在用户在文本框中输入文字时，会将输入的文字实时放大并显示在文本框上方，增加了视觉反馈，使用户能够更清楚地看到自己正在输入的内容，尤其适用于需要精确输入或者对输入内容有较高要求的场景。...
javascript实现 在光标处插入指定内容
10-30
javascript实现 在光标...javascript实现 在光标处插入指定内容的功能可以广泛应用于网页开发中，帮助我们实现更多的交互性功能。这段代码也展示了javascript的强大功能和灵活性，让我们可以轻松地实现各种有趣的功能。
JS 文本输入框放大镜效果
weixin_34000916的博客
01-16 200
JS 文本输入框放大镜效果       今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo        其实这种效果 对于很多童鞋来说 应该并不陌生！我今年最早也是在 12306官网抢票 中 添加联系人 要填写电话号码中看到这种效果！如下图所示：              所以今天下午也就研究下这个，特此分享出来给大家！也做了一个简单...
javaScript表单输入放大提示框
qq_61320547的博客
06-14 200
javaScript表单输入放大提示框
js+css+html自动放大文本框中输入的内容
橘猫吃不胖的博客
12-03 2420
js+css+html自动放大文本框中输入的内容1 案例概述2 编写HTML代码3 编写CSS代码4 编写JavaScript代码5 全部代码 1 案例概述 以查询快递单号为例，在现实生活中，我们经常会使用快递单号查询功能，查看商品的物流信息状态。有时在用户输入单号时，网站为了让用户看清楚输入的内容，会在文本框上方显示一个提示栏，将用户输入的数字放大。 案例分析：当用户在文本框中输入内容时，文本框上面自动显示大号字的内容。如果用户输入为空，需要隐藏大号字内容。 效果图： 2 编写HTML代码 HTML页面
JS代码：文字一个个显示，添加放大效果
DaveLeeCN的博客
09-18 1695
接昨天的文字放大效果，改变一下，我们让文字一个个显示，出现之后放大和缩小之后，后面的字再出现，JS代码如下： "use strict"; var i = 0; textFade(); function textFade(){ var text = "文字渐入效果文字渐入效果"; var str = ""; if(i != 0){ str = text.substr(i-1,1);
js案例:输入时弹出大字号内容
m0_63400611的博客
12-12 160
分析 输入内容时,上面的大号盒子(con)显示更大字体的内容 表单检测用户输入:给表单添加键盘事件 同时把快点单号里面的值(value)获取过来赋值给盒子con(innerText)作为内容 如果快递单号里面内容为空,则隐藏大号字体盒子(con) 代码 <html> <head> <meta charset="utf-8"> <title>输入时弹出大字号内容</title> <style> * { margin
jQuery input文本框文字输入放大显示特效源码.zip
11-16
《jQuery实现输入文本框文字放大显示特效》 在网页设计中，为了提升用户体验，经常会用到各种交互特效。其中，输入框文字放大显示是一种常见且实用的特效，它能够帮助用户更清晰地看到正在输入的文字，尤其适用于...
jQuery文本框输入文字放大预览代码
06-10
《jQuery实现文本框输入文字放大预览效果详解》 在网页设计中，用户交互体验是至关重要的元素之一。为了提升用户的输入体验，一种常见的技术手段是实时预览用户在文本框中输入的文字，例如文字放大预览效果。本文将...
js实现大图显示
sdaddasd的博客
04-15 2114
[code="java"] New Document $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#inn...
JS实现文字放大效果的方法
01-21
本文实例讲述了JS实现文字放大效果的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>JS实现文字放大效果</title> [removed]   var n = 12;   funct
css+js结合实现文本内容自适应页面大小截取显示
08-09
css+js实现页面变化，文本框内容自动截取显示，超过一行长度的就用...显示
使用原生js和vue两种方法实现输入框文本放大功能
fvbxjnch的博客
09-12 746
使用原生js实现 <body> <div id="box"></div> <input type="text" id="content"> <script> var haha = document.querySelector("#box") var lala = document.querySelector("#content") //设置键盘离开事件 content.addEventListener("
小例子：文本框输入文字，在旁边放大提示效果
GrowingRick的博客
03-03 389
练习2 输入文字字体放大再提示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
js放大效果（一）
十分拧巴的白某的技术博客
10-19 2721
实现效果： 很简易的，只是完成了一个简单的放大功能。 布局方面左右两个容器分别放了两个图片，右边是正常尺寸，左边是缩小版的。 遮罩层和右边的图片用了绝对定位，用left，top值来控制显示的区域 html代码： &amp;amp;lt;div class=&amp;quot;wrap&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;left&amp;quot;&amp;amp
js怎么实现文本框中的数据不被修改
最新发布
05-27
实现文本框中的数据不被修改，可以使用 `readonly` 属性来设置输入框为只读状态，这样用户就无法修改输入框中的数据。同时，你也可以通过 JavaScript 来设置输入框的只读状态。 以下是一个基本的示例： ``` <input type="text" id="myInput"> <script> const input = document.querySelector('#myInput'); input.readOnly = true; </script> ``` 在这个示例中，我们获取了 ID 为 `myInput` 的输入框，并使用 `readOnly` 属性将其设置为只读状态。这样，用户就无法修改输入框中的数据了。 如果你想通过 JavaScript 来动态设置输入框的只读状态，可以使用 `setAttribute()` 方法来设置 `readonly` 属性，或者直接设置 `readOnly` 属性的值。例如： ``` const input = document.querySelector('#myInput'); input.setAttribute('readonly', true); // 或者 input.readOnly = true; ``` 这样，用户就无法修改输入框中的数据了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值