<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. 【分享】01. Eclipse for PHP + phpStudy 搭建php开发环境

    配置php编译器 配置phpStudy服务器项目发布目录 修改hosts文件127.0.0.1      www.350zx.cn 新建项目 启动的你的phpStudy  

  2. 写个 Hello world - 前端从入坑到弃坑系列教程(1)

    这是一个系列教程<前端从入坑到弃坑>的第一篇. HTML 是什么 说白了,HTML 就是网页的内容.比如你现在正在阅读的这个网页的内容,就是 HTML.如果你还不明白,请继续往下阅读. 写 ...

  3. 移动端https抓包那些事--进阶篇

    上一次和大家介绍了手机端https抓包的初级篇,即在手机未root或者未越狱的情况下如何抓取https流量,但是当时分析应用时会发现,好多应用的https的流量还是无法抓取到,这是为什么呢? 主要原因 ...

  4. Fluent Validation with Web Api 2

    using FluentValidation;using FluentValidation.Attributes;using System;using System.Collections.Gener ...

  5. 特殊的ip地址

    特殊IP地址 一.0.0.0.0 严格说来,0.0.0.0已经不是一个真正意义上的IP地址了.它表示的是这样一个集合:所有不清楚的主机和目的网络.这里的“不清楚”是指在本机的路由表里没有特定条目指明如 ...

  6. mysql中varchar和char区别(思维导图整理)

    由于mysql一直是我的弱项(其实各方面我都是很弱的),所以最近在看msyql,正好看到varchar和char区别,所以整理一下,便于以后遗忘. 0.0图片已经说明一切,但是系统说我字数不够,我真能 ...

  7. C#设计模式(2)-简单工厂模式

    引言 上一遍中介绍了设计模式中的单例模式-C#设计模式(1)-单例模式,本篇将介绍简单工厂模式,也是比较容易理解的一种模式: 简单工厂模式简介 什么是简单工厂模式? 定义一个工厂类,它可以根据参数的不 ...

  8. React Native 系列(八) -- 导航

    前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...

  9. oracle中decode的一些巧妙用法

    1.符号函数sign在decode中的用法--比较大小 select decode(sign(变量1-变量2),-1,变量1,变量2) from dual; --取较小值sign()函数根据某个值是0 ...

  10. 链接样式L-O-H-A

    伪类可以链接起来使用,即不用在乎顺序 :link{color:blue;} :visited{color:purple;} :link:hover{color:red;} :visited:hover ...