标签: html-input
为什么<INPUT>比我说的要宽？
给定a <select>和<input>元素,两者都指定为200px宽:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px" type="text">
</body>
<html>
一个比另一个更宽1,2,3,4:
这是什么原因？
如果有人能说出理由,也许解决方案是显而易见的,而不是黑客和祈祷.
布局
应用的布局非常合理:
更新1:当我写这个问题时,Chrome从17到19更新了.
更新2:将填充<input>从1更改为0:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>
不会使<input> 200px宽(即不修复它).
更新3: 应用CSS重置:
<!doctype html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0; …推荐指数
解决办法
查看次数
有条件地在Angular 2或4中使输入字段只读:建议+最佳/哪种方式
我试图回答别人的问题.在这样做的过程中,我意识到在一些事情上存在着相当多的不确定性.我希望有人可以提供关于编号点的反馈1..4:
任务:有条件地使输入字段只读
HTML的相关部分:
<input type="text" placeholder="Club Name" #clubName>
将其添加到Typescript组件.
// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element
// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');
不得不说这对我来说是个灰色地带.
- 引用
HTMLInputElement或Element直接使用@ViewChildAngular 2+是一种不好的做法吗？只是,我一直在使用经常看到的例子ElementRef或链接关闭以nativeElement从ElementRef.
由于VS Studio没有那些智能感,我突然觉得我在黑暗中编码.即,你永远不会得到关于方法setAttribute或removeAttribute的反馈,他们的参数要求等(我知道As也投了)
- 然后,在查看文档后,我怀疑您可以直接在HTML模板中的输入上执行此操作:
<input [attr.readonly]= "isReadOnly">
IIRC我认为你必须用一个属性get in Typescript这样做:
get isReadOnly() :boolean {
}
这种方式有效吗？
- 我想知道,您是否也可以在HTML模板中执行方法语法:
<input [attr.readonly]= "isReadOnly()">
打字稿
isReadOnly() :boolean {
}
这种方式有效吗？
总之,什么是最好的方法？
更新:还有*ngIF,因此您输出两个具有相同名称的输入元素之一.但这对我来说听起来就像一把大锤要破解坚果.
推荐指数
解决办法
查看次数
Thymeleaf - 如何有条件地将checked属性添加到输入
如您所知,input组件具有一个属性,checked是否将复选框标记为默认启用.
<input type="checkbox" name="mycheckbox" checked="checked"/>
要在默认情况下禁用该复选框,checked应声明该异常.是否可以checked通过Thymeleaf中的旗帜设置属性？
推荐指数
解决办法
查看次数
HTML5 - 输入=数字和不兼容的浏览器
我想<input type="number">在我的网站上使用html5元素,但我想知道在不支持此功能的浏览器中该字段会发生什么变化？它不是<input type="text">这些浏览器的经典领域吗？
推荐指数
解决办法
查看次数
如何使用不确定的复选框处理浏览器差异
Primer:可以将HTML复选框设置为indeterminate,既不选中也不选中.即使在这种不确定的状态下,仍然存在潜在的布尔checked状态.
单击不确定复选框时,它将失去其indeterminate状态.根据浏览器(Firefox),它还可以切换checked属性.
这个jsfiddle说明了这种情况.在Firefox中,单击其中一个复选框会导致它们切换其初始基础checked状态.在IE中,checked第一次单击时该属性保持不变.
我希望所有浏览器的行为都相同,即使这意味着额外的javascript.不幸的是,该indeterminate属性设置为false 之前的onclick处理(或onchange和jQuery change)被调用,所以我无法检测它是否就是所谓的上点击indeterminate复选框或没有.
该mouseup和keyup(用于空格键切换)事件显示之前indeterminate的状态,但我宁愿不那么具体:它似乎脆弱.
我可以在复选框(data-indeterminate或类似的)上维护一个单独的属性,但我想知道是否有一个我缺少的简单解决方案,和/或其他人是否有类似的问题.
推荐指数
解决办法
查看次数
Bootstrap 3 - 如何最大化导航栏内的输入宽度
现在我有一个看起来像这样的导航栏:http: //bootply.com/78239
我想最大化"搜索"文本输入的宽度,而不创建换行符(即"清除"链接将与"关于"链接紧密).
我只有css和网页设计的基本经验.我读了一些关于" overflow: hidden"技巧的内容,但是当目标元素右侧有更多元素时,我不明白如何使用它.
谢谢
编辑:
部分解决方案可以是为每种情况"手动"设置宽度,例如http://bootply.com/78247:
@media (max-width: 767px) {
#searchbar > .navbar-form {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#searchbar > .navbar-form {
width: 205px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#searchbar > .navbar-form {
width: 425px;
}
}
@media (min-width: 1200px) {
#searchbar > .navbar-form {
width: 625px;
}
}
但是当菜单的文本是"动态的"时(例如,包含"Hello username"),此解决方案将不起作用.
我想如果你假设菜单文本的宽度有限制,这不是一个大问题 - 手动计算/测试这些宽度真的很烦人.我只是想知道是否有一种简洁的方法可以自动完成.
推荐指数
解决办法
查看次数
检查HTML5日期选择器影子DOM
我正在尝试检查某些HTML5控件的shadow DOM,比如input type="date"绑定到a的输入的日期选择器和实际建议下拉列表datalist.最好是在Chrome中,但其他浏览器也会这样做.
我发现通过在Chrome的检查器选项中启用Shadow DOM设置,我可以检查实际的阴影DOM input(包括::-webkit-calendar-picker-indicator显示日期选择器的箭头),但不检查datepicker本身:
同样适用于datalist.看起来这些控件不是输入的一部分,但我也无法在元素面板中的任何其他位置找到它们.
有可能检查这些元素吗？
小编辑澄清:我实际上在寻找哪些伪类适用于哪些控件.有很多,列出其中一些网站,但是我还没有找到它成功地列出源::-webkit-calendar-picker-indicator的datalist元素,这也得到应用.我正在寻找更多那些偷偷摸摸的混蛋,当然最好的来源是马的嘴巴.
推荐指数
解决办法
查看次数
格式输入框的HTML5模式采取日期mm/dd/yyyy？
我使用jQuery datepicker,我想用HTML5模式限制我的输入字段,如果用户不是从jQuery datepicker获取日期,而是键入日期.
如何使用HTML5模式限制用户,以便他们只需在表单中键入日期mm/dd/yyyy？
推荐指数
解决办法
查看次数
调用函数时将焦点设置为文本框
我目前在我的aspx中有一个文本框:
<input type="text" id="myTextbox" value="" />
我想知道每次调用JavaScript方法时是否可以设置焦点(将光标放在该文本框中).我希望它能按照以下方式工作:
function setFocus() {
document.getElementById("myTextbox").Focus();
}
有什么建议？
推荐指数
解决办法
查看次数
在文本输入上可见溢出,是否可能？
CSS overflow:visible似乎不适用于输入.
请参阅以下JS小提琴:https://jsfiddle.net/b4sr578j/
input {
border: 1px dashed black;
overflow: visible;
height: 28px;
font-size: 30px;
}<input type='text' value='gggyyyXXX'/>是否可以使gs和ys的底部可见(不增加文本输入的高度)？
谢谢你的帮助.
推荐指数
解决办法
查看次数
标签 统计
html-input ×10
html ×7
css ×3
html5 ×3
angular ×1
attr ×1
checkbox ×1
date ×1
focus ×1
html-select ×1
javascript ×1
navbar ×1
overflow ×1
readonly ×1
shadow-dom ×1
thymeleaf ×1