<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. 小程序TAB列表切换内容动态变化,scrollview高度根据内容动态获取

    滑动tab选项卡 一.在小程序里面tab选项卡是用的是自带的swiper组件,下面直接上代码 <view class="container"> <view cla ...

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

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

随机推荐

  1. SharePoint 2016 配置工作流环境

    前言 SharePoint 2016 默认创建工作流的时候,工作流平台只包含2010版本,如果想要使用状态机工作流,需要单独安装workflow manager 1.0才可以,下面,我们为大家介绍一下 ...

  2. 接口工具-POSTMAN

    前端的一项总要工作就是测试接口,当然这也可能是你们后台人员做的.不管怎样,都需要测试接口,那么就来介绍一款谷歌浏览器接口测试插件,postman.首先你要去谷歌的应用商店,搜索这个插件,(需要FQ), ...

  3. [补档]vijos1883 月光的魔法

    vijos1883 月光的魔法 题目 传送门:https://www.vijos.org/p/1883 背景 影几欺哄了众生了 天以外-- 月儿何曾圆缺   描述 有些东西就如同月光的魔法一般. Lu ...

  4. 27. leetcode 401. Binary Watch

    A binary watch has 4 LEDs on the top which represent the hours (0-11), and the 6 LEDs on the bottom ...

  5. (4)UIView和父子控件

    IButton控件中除了有自身的属性之外还有继承的view的属性 内存地址一样,是同一个view来的,也就是最外层的view.

  6. How to create a jump server in AWS VPC

    本来是写的Word文档,给其他国家的同时看的,所以一开始就是英文写的,也没打算翻译成为中文了,顺便抱怨下,网上资料找了很久的资料都没有看到介绍怎么在单机环境下搭建RD Gateway的,写本文的目的是 ...

  7. Head First 设计模式 第3章 装饰者模式

    第3章 装饰者模式 1.定义/说明 动态.透明的将职责附加到对象上(或从对象上撤销),而不影响其他对象.若要扩展功能,装饰者模式提供了比继承更富有弹性的替代方案. 2.介绍 首先让我们先来介绍一下场景 ...

  8. 安徽省2016“京胜杯”程序设计大赛_J_YZK的大别墅

    YZK的大别墅 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 24 Accepted: 12 Description 土豪 ...

  9. Java 加载、链接、初始化

    JVM 动态地加载.连接.初始化类或接口(在本文之后的篇幅中,我将使用"类"来表示"类和接口").这里我先贴上 Java 虚拟机规范的原文: Loading i ...

  10. C#快速入门

    一.简介 1.C#是由Anders Hejlsberg和他的团队在.Net框架开发期间开发的:是.Net框架的一部分. C#是专为公共语言基础结构(CLI)设计的,CLI由可执行代码和运行时环境组成, ...