input长度随输入内容动态变化 input光标定位在最右侧
<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"
);
});
})
$(".tag_input").focus();
$(".tag_input").val('');
$(".tag_input").val($(this).text());
input长度随输入内容动态变化 input光标定位在最右侧的更多相关文章
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...
- 使用iScroll时,input等不能输入内容的解决方法
做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...
- 使用iScroll时,input等不能输入内容的解决方法(share)
最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFo ...
- input 正则限制输入内容
js 限制input只能输入数字小数点也不能输入或者是只能输入数字,能输小数点等等,本文大致整理了一些,感兴趣的朋友可以收藏下 代码如下: 1 <input type="text& ...
- input框监控输入内容
$(".input").bind("input porpertychange",function(){ console.log($(".input&q ...
- vue时时监听input输入框中 输入内容 写法
Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...
- 小程序TAB列表切换内容动态变化,scrollview高度根据内容动态获取
滑动tab选项卡 一.在小程序里面tab选项卡是用的是自带的swiper组件,下面直接上代码 <view class="container"> <view cla ...
- UITextField(一)监听输入内容的变化(开发笔记)
//添加事件UIControlEventEditingChanged [textField addTarget:self action:@selector(textFieldDidChange:) f ...
随机推荐
- 怎么关闭wps热点?永久关闭wps右下角弹窗的方法!
wps热点总是开机或者开启WPS后在任务栏闪烁,影响心情,百度了一下找到的方法也过时了.我的是WIN10系统 所以自己摸索了一下,找到了解决办法.其实还是用空白文件替换wps热点的.exe文件,只是这 ...
- 异常解决:Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
异常描述 这个异常通常有如下信息: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failu ...
- Redux源码分析之createStore
接着前面的,我们继续,打开createStore.js, 直接看最后, createStore返回的就是一个带着5个方法的对象. return { dispatch, subscribe, getSt ...
- 如何发布自己的开源框架到CocoaPods【转】
在开发过程中,经常会使用到第三框架,我们通过一个pod install命令,很方便的就将第三方框架加到我们自己的项目中. 如果我们也想将自己写的组件或库开源出去,让别人也可以通过pod install ...
- Spring 实现自定义 bean 的扩展
Spring mvc 提供了扩展 xml 的机制,用来编写自定义的 xml bean ,例如 dubbo 框架,就利用这个机制实现了好多的 dubbo bean,比如 <dubbo:applic ...
- private static final long serialVersionUID = 1L;详解
public class User implements Serializable { /** * serialVersionUID */ private static final long seri ...
- ajax执行顺序问题
在一个函数里,执行顺序是先传所有的值到指定url,然后再返回所有的success 解决方法:将ajax改成异步 aysnc:false
- 1 Acid burn ★ Nag,Name/Serial,Serial
无花无壳爆破 仅允许非商业转载,转载请注明出处
- [Noi2008]假面舞会
考试的时候果断放弃,cout<<"-1 -1"骗10分hhh... 这也是图上问题.注意题目意思: ①如果有多个点指向同一个点,那么他们属于同一类别. ②一个点看到的所 ...
- 怎么用snapman一个人在三天内开发出一个复杂的软件开发项目管理系统
snapman是一个简单而强大的团队协作软件,在上面的信息可以是数据.可以是规则.也可以是自动化代码:最重要的它是一个可以开发的协作平台,所有信息都可以作用到所有人或机器上,大大减少了工作的复杂度.软 ...