zoukankan      html  css  js  c++  java
  • 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");
                   });
               })
     
    实现input光标定位在最后一位:
    方法:给input重新赋值
    $(".tag_input").focus();
    $(".tag_input").val('');
    $(".tag_input").val($(this).text());
  • 相关阅读:
    ClipboardJS实现将页面内容复制到剪贴板
    全文索引FULLTEXT 的使用
    [1].Array.diff
    Leetcode——Queue队列
    Matplotlib——scatter散点图
    Matplotlib的一些小细节——tick能见度
    Matplotlib的一些小细节——Annotation标注
    Matplotlib的一些小细节——Legend图例
    Matplotlib基本知识(figure & axes
    锁升级简记
  • 原文地址:https://www.cnblogs.com/cina33blogs/p/6738712.html
Copyright © 2011-2022 走看看