前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EasyNVR前端构建之输入框样式的调整

EasyNVR前端构建之输入框样式的调整

作者头像
EasyNVR
发布2020-04-23 15:57:07
9450
发布2020-04-23 15:57:07
举报
文章被收录于专栏:EasyNVREasyNVR

背景 EasyNVR授权方式分为软件的授权和硬件授权两种方式,软件授权需要在软件输入永久邀请码可以激化永久授权

EasyNVR
EasyNVR

起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授权。 在实际的应用过程中我们发现由于输入框自身大小的原因,我们的机器码有事无法完全展示给用户,不方便用户的自我检查激活码是否准确。因此我们考虑使用可以方便拉伸改变大小的输入框。

###实施流程及遇到问题:###

对于可以自定义改变打的大小的输入框样式,第一个想到的是,

然而悲剧的是斌没有很好的兼容性,可以很好的在chrome、Firefox浏览器完成自定义输入框的大小拉伸,在IE浏览器下 就无法完成自定大小的拉伸了

为了解决这个问题,互联网再次给我帮助,

通过插件 Resizable | jQuery UI

完美是的实现了自定义拉伸,使用鼠标改变元素的尺寸

具体使用步骤

引入 jQuery UI

代码语言:javascript
复制
<script src="./adminlte-2.3.6/plugins/jquery-ui-1.12.1.custom/jquery-ui.js"></script> 

给指点的元素添加id方便使用插件

代码语言:javascript
复制
 <td>
   <textarea placeholder="输入申请到的激活码" id="activationCode" ></textarea>
   	</br>
   	<button id="check">提交</button></span>
  </td>

在js中实现该方法

代码语言:javascript
复制
	// 调用jquery-ui来完成自定义控制输入框大小,默认300X50
	 $("#activationCode").resizable({ }); 

实现效果展示:

IN Chrome

EasyNVR
EasyNVR
EasyNVR
EasyNVR

IN IE

EasyNVR
EasyNVR
EasyNVR
EasyNVR
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-01-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档