input长度随输入内容动态变化 input光标定位在最右侧

时间:2023-01-06 14:07:02

<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">

<input type="text">的默认size就是20

如果你在style里定义了width属性,又要让它的width根据内容来变化,两个要求不就矛盾了吗.所以这里不能在style里定义width属性.

function len(s) { //获取输入文本长度,字符占一位,汉字两位
var l = 0;
var a = s.split("");
for (var i=0;i<a.length;i++) {
if (a[i].charCodeAt(0)<299) {
l++;
} else {
l+=2;
}
}
return l;
}
或者将中文替换成两个字符
var str_temp = $(".tag_input").val().replace(/[\u4e00-\u9fa5]/g, 'aa');
$(".tag_input").attr("size",str_temp.length);
$(".tag_input").width("auto");

jq:

$(function(){

               //propertychange监听input里面的字符变化,属性改变事件
               $('.zy-price').bind('input propertychange'function() {
                   var $this = $(this);
                   console.log($this);
                   var text_length = $this.val().length;//获取当前文本框的长度
                   var current_width = parseInt(text_length) *16;//该16是改变前的宽度除以当前字符串的长度,算出每个字符的长度
                   console.log(current_width)
                   $this.css("width",current_width+"px");
               });
           })
 
实现input光标定位在最后一位:
方法:给input重新赋值
$(".tag_input").focus();
$(".tag_input").val('');
$(".tag_input").val($(this).text());

input长度随输入内容动态变化 input光标定位在最右侧的更多相关文章

  1. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  2. jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现

    jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...

  3. 使用iScroll时,input等不能输入内容的解决方法

    做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...

  4. 使用iScroll时,input等不能输入内容的解决方法(share)

    最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFo ...

  5. input 正则限制输入内容

    js 限制input只能输入数字小数点也不能输入或者是只能输入数字,能输小数点等等,本文大致整理了一些,感兴趣的朋友可以收藏下   代码如下: 1 <input type="text& ...

  6. input框监控输入内容

    $(".input").bind("input porpertychange",function(){ console.log($(".input&q ...

  7. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  8. UITextField(一)监听输入内容的变化(开发笔记)

    //添加事件UIControlEventEditingChanged [textField addTarget:self action:@selector(textFieldDidChange:) f ...

  9. IE去掉input的type&equals;”text”输入内容时出现的X和type&equals;”password”出现的眼睛图标

    从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本.对于type=”password”的 input 则会在右方显示 ...

随机推荐

  1. 即使用ADO&period;NET,也要轻量级实体映射,比Dapper和Ormlite均快

    不管出于什么原因,有时候框架人员摒弃了NH或EF,而使用原生数据库访问对象. 为了优美的编程,用上我写的轻量级映射扩展方法吧 目的:将SqlDataReader自动转换成T类型 代码如下: /// & ...

  2. DHCP snooping

    DHCP snooping 技术介绍   DHCP监听(DHCP Snooping)是一种DHCP安全特性.Cisco交换机支持在每个VLAN基础上启用DHCP监听特性.通过这种特性,交换机能够拦截第 ...

  3. 本地推送UILocalNotification

    //本地推送---无需网络,由本地发起 UILocalNotification *localNotification = [[UILocalNotification alloc]init]; //设置 ...

  4. javaSE第二十二天

    第二十二天    312 1:登录注册IO版本案例(掌握)    312 2:数据操作流(操作基本类型数据的流)(理解)    313 (1)定义:    313 (2)流对象名称    313 (3 ...

  5. cocos2d&lpar;粒子效果编辑器&rpar;

    ParticleDesigner  for  Mac下载地址:http://www.cocoachina.com/bbs/read.php?tid=108339 最近在做一款粒子编辑器 其实就是在co ...

  6. Sea&period;js

    SeaJS与RequireJS最大的区别   执行模块的机制大不一样-----------------------------------由于 RequireJS 是执行的 AMD 规范, 因此所有的 ...

  7. 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇,超详细教程

    项目内容 本案例选择>> 商品类目:沙发: 数量:共100页  4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...

  8. IIS&plus;Tomcat功能iis端口2

    之前写过IIS桥接Tomcat是通过isapi_redirect.dll,组件方式实现共用端口的,但是在Windows2012服务器 iis8.0版本中,配置完成后没有效果,比较抓狂,分析发现如下信息 ...

  9. Linux 两组信号对比&lpar;关闭和停止进程信号&rpar;

    之前看信号的时候,没有太注意不同信号的对比.今天再次看到的时候,突然感觉对一些信号,非常相似,乃至非常容易混淆.今天周末就抽空总结一下. 一.关闭进程信号 常见的4中关闭进程信号是SIGKILL,SI ...

  10. MySql数据库概念

    一.什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的建立在计算机存储设备上的仓库. 简单来说是本身可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据进行 ...