标签: html-input
html 输入一个在另一个下面
我在尝试进行的这两个输入中遇到了这个问题，而且我无法简单地找到使一个输入低于另一个输入的方法...\n我的意思是这样
\n\n- \n
- 姓名 \n
- 电子邮件 \n
- 提交 \n
代码在这里
\n\n* {\r\n text-decoration transition: all 0.2s;\r\n padding: 0;\r\n margin: 0;\r\n font-family: "Open Sans";\r\n}\r\nbody {\r\n display: flex;\r\n height: 100vh;\r\n background: #e5e5e5;\r\n}\r\n.wrapper {\r\n margin: auto;\r\n background: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n width: 440px;\r\n text-align: center;\r\n border-radius: 5px;\r\n overflow: hidden;\r\n box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);\r\n}\r\n.header {\r\n padding: 50px 50px 100px 50px;\r\n min-height: 150px;\r\n background: url("https://cdn0.iconfinder.com/data/icons/elpis/144/Newsletter-128.png") no-repeat center 130px;\r\n}\r\n.header h1 {\r\n color: #536a89;\r\n text-transform: uppercase;\r\n font-size: 30px;\r\n …推荐指数
解决办法
查看次数
Android 上的 Google Chrome 101 在软键盘上显示 TAB 键，而不是 HTML 输入字段的 ENTER
我在 Android 11 上使用 Chrome 101。将焦点设置在 HTML 输入字段上会弹出软键盘。在早期版本的 Chrome 中，软键盘右下角有 ENTER 键： Android 软键盘 ENTER 键
但现在，对于表单中最后一个字段以外的任何输入表单字段，它都会显示 TAB 键。 Android 软键盘 TAB 键
有没有一种方法或设置可以更改此设置以始终显示输入表单字段的 ENTER 键？
android enter html-input android-softkeyboard google-chrome-android
推荐指数
解决办法
查看次数
playwright-test：测试是否需要输入
我有一个必需的登录表单输入：
<input
autoComplete="email"
defaultValue={email}
disabled={state === 'submitting'}
id="email"
name="email"
placeholder={t('user-authentication:email-placeholder')}
required // HERE!
type="email"
/>
如何测试 Playwright 是否需要输入？我在 Chromium 中的本机浏览器警告是：“请填写此字段。”
有没有办法在剧作家中检查/断言此警告？或者另一种方法来测试是否需要输入？
我尝试在输入中不写入任何内容，.fill('')然后按 Enter 键page.keyboard.press('Enter')，但这些并没有导致出现警告。
推荐指数
解决办法
查看次数
如何使用 Tailwind CSS 设置 HTML 文件输入的样式？
当我遇到这个问题时，我花了大约 20 分钟在这里的一篇文章中找到答案：https ://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css/
我在 Stackoverflow 上浏览了很多页关于现有类似问题的过于复杂的答案
将解决方案贴在这里，方便大家快速找到答案
按照问题中提供的示例设置输入类型=“文件”按钮的样式，我尝试了一堆不太令人满意的解决方案
我尝试将输入包装在标签元素中并将显示设置为无
<label className="text-sm bg-stone-200 hover:bg-stone-300" htmlFor="fileUpload">
<input type="file" className="hidden" id="fileUpload"/>
Upload File
</label>
这是有效的，但是你会丢失文件名预览 - 解决方案涉及<span>在标签和隐藏输入之间放置一个并在 onChange 事件中更改 span 元素。我认为对于这样一个简单的任务来说代码太多了
我还尝试使用元素属性设置大小，<input type="file" size={60} />这显然对其他人有效，但当我尝试时没有效果
推荐指数
解决办法
查看次数
使用jQuery过滤输入文本
我想过滤并锁定输入文本.例如,在某些输入中,用户只能键入波斯语/波斯语字符而不能输入英语,或者用户可以键入英语而不能输入波斯语.意味着某些输入仅接受波斯语/波斯语字符,而其他输入仅接受英语.
我也发现了这个http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input.如果知道任何波斯语字符的常规表现可以帮助我或如何更改键盘模式.
谢谢.
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
使html文本字段内的占位符文本闪烁
在问这个问题之前,我搜索了很多这个功能,但没有找到任何线索,所以这就是为什么发布一个新问题.
所以实际上我在这样的html文本字段中有一个占位符文本
<input type="text" class="timepicker" placeholder="Placeholder Text..." >
所以我想要的是让这个占位符闪烁.所以它可能在HTML或使用jquery或javascript.
推荐指数
解决办法
查看次数
使用<input type ="file>选择文件时如何防止表单提交？
我的页面上有一个文件输入:
<input type="file" id="file-main" style="display:none;" name="file-main">
我有一个标签指向那个输入:
<button class="main-button" id="file-choose-btn"><lable for="file-main">Choose Image</lable></button>
但是当我按下按钮(选择文件)时,表单立即被提交,并尝试执行PHP文件(即表单的"动作").我还没有该文件,因此它返回HTTP 404错误.
基本上,我的问题是,如何在单击(或本例中的按钮)后阻止执行表单.
我尝试使用事件处理程序来阻止事件的默认操作:
document.getElementById("file-choose-btn").onclick = function(e){
e.preventDefault();
}
但后来我甚至无法选择文件,因为窗口甚至没有打开.
有解决方案吗 谢谢.
推荐指数
解决办法
查看次数
Materializecss-使用Typeahead.js输入标签
所以我正在使用Materialziecss和第三方库来输入标签
- Materializecss：http：//materializecss.com/
- 物化标签库：http : //henrychavez.github.io/materialize-tags/examples/
现在，根据标签输入库的文档，如果您愿意包括自动完成的typeahead功能，则需要包括typeahead.js库。
他们推荐的一个是http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js
我正在尝试应用该库，但是无法正常运行。我的代码如下
$(document).ready(function() {
$('select').material_select();
$('#en_tags').materialtags({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
}
});
});<head>
<link rel="stylesheet" href="<?php echo base_url('assets')?>/css/materialize-tags.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="<?php echo base_url('assets')?>/js/materialize-tags.min.js"></script>
<script src="<?php echo base_url('assets')?>/js/typeahead.js"></script>
</head>
<body>
<div class="input-field">
<label for="en_tags">English Tags</label>
<input type="text" name="en_tags" id="en_tags" value="" data-role="materialtags"/>
</div>
</body>提前致谢
推荐指数
解决办法
查看次数
HTML输入文件onchange不会再次触发其他文件
我已经看到许多有关输入文件元素onchange第二次不触发同一文件事件的问题，但我的情况并非如此。选择其他文件时，我的onchange处理程序未触发。
我选择了一个文件，然后，如果我尝试选择另一个文件，它将无法正常工作。出现文件选择对话框，我选择了（不同的）文件，仅此而已。onchange第一次调用的处理程序不再被调用。选择文件后什么都没有发生。
这是我的JS：
<input type="file" id="my-input" name="my-input" class="hidden" />
（在jQuery上）：
$("#my-input")[0].onchange = onSelectedFileChange;
function onSelectedFileChange(e) {
file = e.target.files[0];
handleFile(); //my code that processes the file, has nothing to do with the input element.
}
我也尝试过重新添加onchangein handleFile方法（例如，复制$("#my-input")[0].onchange = onSelectedFileChange;到其中），但是它似乎也不起作用。选择文件后，输入法的onchange属性设置为null，即使我再次显式设置它，它也仍然保持null。
为什么会这样呢？这恰好是跨浏览器的情况。
更新：这是handleFile方法：
//file is in the global scope, from the previous method
function handleFile() {
var lowerName = file.name.toLowerCase();
if …推荐指数
解决办法
查看次数
标签 统计
html-input ×10
html ×5
javascript ×4
html5 ×2
jquery ×2
android ×1
css ×1
enter ×1
file-upload ×1
filtering ×1
flexbox ×1
forms ×1
materialize ×1
playwright ×1
regex ×1
required ×1
tailwind-css ×1
typeahead.js ×1