根据输入的字符动态增加输入类型文本文本框的宽度

dynamically increase input type text textbox width according to the characters entering into it(根据输入的字符动态增加输入类型文本文本框的宽度)
本文介绍了根据输入的字符动态增加输入类型文本文本框的宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我有一个 textbox,用户可以在其中输入任意数量的字符,但我希望它的 宽度根据输入的字符数动态增加.

I have a textbox where the user can enter any number of characters, But I want its width to be increased dynamically with respect to the number of characters entered into it.

我已经完成了如下所示的解决方法,它可以部分工作,它会动态增加宽度但不是那么精确,并且会在一段时间后隐藏第一个输入的字符,因为我在其中应用了糟糕的逻辑.我刚刚给出了 17 个字符的狂野截止值来开始增量.

I have done a workaround shown below and it works partially, it will increase the width dynamically but not so precisely and will hide the first entered characters after a while because of my poor logic applied in it. I've just given a wild cutoff of 17 characters count to start the increment.

只有在字符数达到文本框末尾时才开始增加宽度.

更新:

我希望显示在该字段中输入的所有字符,而默认情况下,文本框会隐藏最左边的字符.

FIDDLE 演示

HTML

<input type="text" id="txtbox" />

脚本

$('#txtbox').keypress(function() {
    var txtWidth = $(this).width();
    var cs = $(this).val().length;

    if(cs>17){
       $(this).width(txtWidth+5);
    }
});

推荐答案

我已经尝试过这段代码,它运行良好.

I have tried this code and it works fine.

<html>
<head>
  <script type="text/javascript">
     function Expand(obj){
      if (!obj.savesize) obj.savesize=obj.size;
      obj.size=Math.max(obj.savesize,obj.value.length);
     }
  </script>
  </head>
  <body>
     <form>
       <input  type="text" size="5" style="font-family:Courier;" onkeyup="Expand(this);">
     </form>
  </body>
</html>

请务必在文本框中使用单空间字体,否则大小 attr.并且字符数不匹配

Be sure to use mono space fonts in text box, otherwise the size attr. and number of characters won't match

这篇关于根据输入的字符动态增加输入类型文本文本框的宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)