Question

我有一个只读文本框，它的值来自数据库.. 我希望它的宽度可以根据文本长度进行设置。我不确定一旦文本框从DB中获取值，我需要调用哪个jQuery事件。

现在我有onkeypress()事件..哪个正常文本框工作正常..而不是Onkeypress()我想使用任何其他事件，它会触发一次存储在该只读文本框中的值

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span><p>Hello, my name is </p></span>

<span> <input id="txt" value="I am coming from db" readonly="readonly" class="form" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" type="text" >
</span>

＆＃13;

Answer 1

设置值时不会触发特定事件，您可以在文档加载$(document).ready(function(){});上通过javascript而不是服务器端语言设置值，并相应地修改长度。

或者，如果在更改时也会发生这种情况，您可以设置更改侦听器并在设置值时触发它：

var myValue = 'Any value';

// trigger change whenever you set a value
$('#myInputId').val(myValue).trigger('change');

$('#myInputId').change(function(){ // fix the length });

Answer 2

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script>
    $(function(){
        $("#txt").change(function() {            
            $(this).attr('style', "width: " + (($(this).val().length + 1) * 8) + "px");
        });
        $("#txt").trigger("change");
    })
</script>
<span><p>Hello, my name is </p></span>

<span> <input id="txt" value="I am coming from db" readonly="readonly" class="form" type="text" >
</span>

＆＃13;

Answer 3

如果我理解你的要求您可以在元素完全正常工作后添加脚本标记，如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span><p>Hello, my name is </p></span>

<span> <input id="txt" value="I am coming from db" readonly="readonly" class="form"  type="text" >
</span>
<script>
var elelement = document.getElementById("txt");
elelement.style.width = ((elelement.value.length + 1) * 8) + 'px'
</script>

您也可以在文档就绪方法

中执行此操作

选择元素并调整宽度。

$(document).ready(function() {
    var element = document.getElementById("txt");
    element.style.width = ((element.value.length + 1) * 8) + 'px'
  });

Answer 4

输入中的尺寸属性可让您控制宽度以适应动态，并使用keypree change事件，以便在输入值更改时使其适合。

$('#txt').bind("keypress change ",function(){
 $(this).attr('size',$(this).val().length);
});
$('#change').click(function(){
  $('#txt').val('1234566').change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span><p>Hello, my name is </p></span>

<span> <input id="txt" value="12345" class="form"  type="text"size='5' >
</span>
<button id="change"> change </button>

Answer 5

＆＃13;

$('#txt').on('change', function() {
	 $(this).width(($(this).val().length + 1) * 8);
});

setTimeout(function() {
   $('#txt').val('sdsds sdsdsdsd sddsdsdsdsds sddsdsds');
	 $('#txt').trigger('change');
}, 1000)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><p>Hello, my name is </p></span>

<span> <input id="txt" value="I am coming from db" readonly="readonly" class="form" type="text" >
</span>

＆＃13;

Jquery：设置只读文本框宽度动态

5 个答案: