blocks|key|104368|text|您可以使用inputclass选项提供一个CSS类，您可以在其中添加输入字段的宽度，如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|104369|<a+href="#"+id="username"+data-type="text"+data-pk="1">awesome</a>
<script>
$(function(){
++++$('#username').editable({
++++++++url:+'/post',
++++++++title:+'Enter+username',
++++++++inputclass:+'some_class'
++++});
});
</script>|code-block|syntax|javascript|104370|和css：|104371|.some_class{
+++width:+240px;
}|104372|entityMap^0|5|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>you could use <code>inputclass</code> option to provide a CSS class, where you can add the width for input field, like</p>

<pre><code>&lt;a href="#" id="username" data-type="text" data-pk="1"&gt;awesome&lt;/a&gt;
&lt;script&gt;
$(function(){
    $('#username').editable({
        url: '/post',
        title: 'Enter username',
        inputclass: 'some_class'
    });
});
&lt;/script&gt;
</code></pre>

<p>And css:</p>

<pre><code>.some_class{
   width: 240px;
}
</code></pre>


blocks|key|104405|text|如果您不想更改.css文件，可以通过更改其模板来设置x可编辑输入域的样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|104406|<a+href="#"+id="username"+data-type="text"+data-pk="1">awesome</a>
<script>
++++$(function(){
++++++++$('#username').editable({
++++++++++++url:+'/post',
++++++++++++title:+'Enter+username',
++++++++++++tpl:+"<input+type='text'+style='width:+400px'>"
++++++++});
++++});
</script>|code-block|syntax|javascript|104407|请注意'tpl‘属性。|104408|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you don't want to change the .css file, you can set the style of the x-editable input field by changing its template:</p>

<pre><code>&lt;a href="#" id="username" data-type="text" data-pk="1"&gt;awesome&lt;/a&gt;
&lt;script&gt;
    $(function(){
        $('#username').editable({
            url: '/post',
            title: 'Enter username',
            tpl: "&lt;input type='text' style='width: 400px'&gt;"
        });
    });
&lt;/script&gt;
</code></pre>

<p>Note the 'tpl' attribute. </p>


blocks|key|104430|text|如果你使用angularjs+xeditable来做这件事，你可以使用'e-style‘而不是'style’，比如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|104431|<a>+e-style="width:+180px"+editable-text="article.title"+e-required=""+</a>|code-block|syntax|javascript|104432|如果没有angularjs，我不确定这是否可行。但值得一试|104433|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>if you're doing this with angularjs xeditable you can just use 'e-style' instead of 'style' like:</p>

<pre><code>&lt;a&gt; e-style="width: 180px" editable-text="article.title" e-required="" &lt;/a&gt;
</code></pre>

<p>I'm not sure if that would work without angularjs... but it's worth a try</p>


blocks|key|104490|text|通过使用data-inputclass属性，可以避免对页面上的每个元素使用自定义Javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|104491|<a+href="#"+id="username"+data-inputclass="some_class"+data-type="text"+data-pk="1"+>awesome</a>|code-block|syntax|javascript|104492|和CSS：|104493|.some_class{
+++width:+240px;
}|104494|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can avoid having custom Javascript for each element on the page by using the data-inputclass attribute:</p>

<pre><code>&lt;a href="#" id="username" data-inputclass="some_class" data-type="text" data-pk="1" &gt;awesome&lt;/a&gt;
</code></pre>

<p>And CSS:</p>

<pre><code>.some_class{
   width: 240px;
}
</code></pre>


blocks|key|321589|text|我对代码进行了修改以控制宽度。也许这不是一个优雅的解决方案，但它对我来说很有效。欢迎光临！包括添加一个div作为获取.editableform+.form控件类宽度的指南|type|unstyled|depth|inlineStyleRanges|entityRanges|data|321590|在进行更改之前进行BKP！|321591|第14行上的bootstrap-editable.js添加以下代码|321592|var+GLOBAL_aux_id_ei+=+0;|code-block|syntax|javascript|321593|在第181行添加以下代码|321594|var+w+=+$('#div-guide-'%2BGLOBAL_aux_id_ei).width();
w+=+w+-++((w+*+20)+/+100);
$('.editableform+.form-control').css({"width":""%2Bw%2B"px"});|321595|在第628行，添加此代码并修改现有代码|321596|GLOBAL_aux_id_ei+=+GLOBAL_aux_id_ei+%2B+1;+
$.fn.editableform.template+=+'<form+class="form-inline+editableform"++++id="frm-editable-'%2BGLOBAL_aux_id_ei%2B'">'%2B
'<div+class="control-group">'+%2B+
'<div>\n\
<div+class="editable-input"></div><div+class="editable-buttons"></div>\n\
</div>'%2B
'<div+class="editable-error-block"></div>'+%2B+
'</div>'+%2B+
'</form>\n\
<div+style="display:none;"+id="div-guide-'%2BGLOBAL_aux_id_ei%2B'"></div>';|321597|bootstrap-editable.css位于..editable+class+er.editable-内联类的第158行|321598|width:+100%25;|321599|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>I made a modification in the code to control the width. Maybe not the elegant solution, but it works for me. Greetings!
Consist in add a div as a guide to get width for the .editableform .form-control class</p>

<p>Make BKP before make changes!</p>

<p>bootstrap-editable.js
On Line 14 add this code</p>

<pre><code>var GLOBAL_aux_id_ei = 0;
</code></pre>

<p>On Line 181 add this code</p>

<pre><code>var w = $('#div-guide-'+GLOBAL_aux_id_ei).width();
w = w -  ((w * 20) / 100);
$('.editableform .form-control').css({"width":""+w+"px"});
</code></pre>

<p>On Line 628 add this code and modify the existing code</p>

<pre><code>GLOBAL_aux_id_ei = GLOBAL_aux_id_ei + 1; 
$.fn.editableform.template = '&lt;form class="form-inline editableform"    id="frm-editable-'+GLOBAL_aux_id_ei+'"&gt;'+
'&lt;div class="control-group"&gt;' + 
'&lt;div&gt;\n\
&lt;div class="editable-input"&gt;&lt;/div&gt;&lt;div class="editable-buttons"&gt;&lt;/div&gt;\n\
&lt;/div&gt;'+
'&lt;div class="editable-error-block"&gt;&lt;/div&gt;' + 
'&lt;/div&gt;' + 
'&lt;/form&gt;\n\
&lt;div style="display:none;" id="div-guide-'+GLOBAL_aux_id_ei+'"&gt;&lt;/div&gt;';
</code></pre>

<p>bootstrap-editable.css
In .editable-container.editable-inline class on line 158 </p>

<pre><code>width: 100%;
</code></pre>


<p>How do you adjust the input width of the popup</p>

<p>it doesn't seem like there is any option for it in </p>

<p><a href="http://vitalets.github.io/x-editable/docs.html#text">http://vitalets.github.io/x-editable/docs.html#text</a></p>


x-editable - adjusting the width of input field

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何调整弹出窗口的输入宽度似乎没有任何选项可供选择

问X-可编辑-调整输入字段的宽度
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问X-可编辑-调整输入字段的宽度EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问X-可编辑-调整输入字段的宽度
EN