标签: html-input
如何在焦点更改时停止浏览器自动滚动容器
当您在浏览器中的输入字段之间切换时，浏览器将自动滚动最近的父容器以将下一个聚焦字段放置在视图中。
简单的 JSFiddle：http://jsfiddle.net/TrueBlueAussie/pxyXZ/1/
$('.section').eq(6).find('input').focus();
例如，如果您打开上面的小提琴，它会选择黄色窗口底部的“示例项目 7”。如果按 Tab 键，“示例文本 8”字段会向上跳到父窗口的中间。
显然，这对于普通网站来说是一件好事，但我有一个自定义滚动容器，我可以在其中手动定位和滚动所有内容。我正在跟踪焦点变化，并将使用动量滚动器将其带入视图，但如何禁用网络浏览器的默认滚动行为？乐意接受 CSS、Javascript 或 JQuery 解决方案。
推荐指数
解决办法
查看次数
W3C 验证器错误：仅当输入类型为
给定 HTML 文档
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<form>
<input type="email" placeholder="E-Mail"/>
</form>
</body>
</html>
的W3C验证（V1.3）给出以下错误消息：
第 8 行，第 48 列：
placeholder仅当输入类型为电子邮件、号码、密码、搜索、电话、文本或 url 时才允许使用属性。
为什么？
推荐指数
解决办法
查看次数
从 Javascript 数组生成随机元素组
您好，我正在为学校做一个项目，我正在尝试从姓名列表中生成随机的姓名组。组的大小和组的数量将基于用户的输入。我有从数组中随机生成单个元素的代码，但我需要一些帮助分组。这是我到目前为止的代码。它无法运行请帮助谢谢
function yeah()
{
var arr = prompt("Enter your names").split(",")
console.log(arr);
var random = arr[Math.floor(Math.random() * arr.length)];
document.getElementById("h2").innerHTML = random;
}
function groups()
{
var arr = prompt("Enter your names").split(",");
var random = arr[Math.floor(Math.random() * arr.length)];
var numElem = document.getElementById("input2").value;
for (i=0;i <= arr.length; i++)
{
var newArr = [random];
console.log(newArr);
//print name to a new list
//remove name from old list
/* var arr = prompt("Enter your names").split(",")
var groupNum = document.getElementById("input1").value;
var newArrays = arr.length / groupNum; */ …推荐指数
解决办法
查看次数
文件输入 - 接受来自 android 相机或画廊的图像
我的网站中有接受文件输入的表单。输入代码在这里：
<input type="file" accept="image/*" capture/>
当我使用 google chrome for android 在我的笔记 4 上运行这个时，我只能选择相机应用程序来添加图像。我无法选择使用图库或照片中的图像。
在带有 Safari 的 iPhone 中，它完美运行。它允许我从画廊或相机中进行选择。android 版 google chrome 中没有什么？我错过了什么？
推荐指数
解决办法
查看次数
禁用 HTML 输入列表的建议
我想禁用以前输入的文本的建议，<input type="text" list="stuff">它提供了一个下拉列表，可以通过<datalist>.
此行为会导致某些条目显示两次，有时在选择它们时会出现问题。
我试过<input type="text" autocomplete="off">- 在 Firefox 中，它的工作原理与我想要的一样，但 Chrome 也禁用了来自 的建议<datalist>。
即使涉及 JavaScript，我也很乐意提供任何解决方案，谢谢。
推荐指数
解决办法
查看次数
使用带有模糊的 setSelectionRange - Chrome 和 Safari 中的差异
我正在尝试修复具有 onblur 事件侦听器的代码，该事件侦听器执行 setSelectionRange。我注意到，在 Chrome 上使用此功能时，模糊事件会将光标移动到下一个选项卡索引。然而，在 safari 上，光标保留在同一元素上，并且光标移动到 setSelectionRange 中指定的位置。
问题：
- 在执行模糊事件时我是否应该使用 setSelectionRange ？
- 有什么方法可以在两个浏览器上一致地使用 setSelectionRange 即我可以使 Safari 以与 Chrome 相同的方式工作吗？
下面是一段 hello world 代码，显示了当我在 Safari 和 Chrome 中按 Tab 键移出某个字段时，光标的行为有何不同：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script>
function handleBlur() {
event.target.setSelectionRange(1,1)
};
</script>
</head>
<body>
<input value="First Name" onblur="handleBlur()">
<input value="Last Name" onblur="handleBlur()">
</body>
</html>
推荐指数
解决办法
查看次数
是否存在与选择数据列表 <option> 相关的事件？
我有一个<input>字段中的（动态）选择列表：
<input list="choices">
<datalist id="choices">
<option>one</option>
<option>two</option>
</datalist>在做出选择后是否会立即触发事件<option>？（如果这很重要，我想在 Vue.js 中捕获/使用它）。这将是在以下场景中单击鼠标左键时：
推荐指数
解决办法
查看次数
如何在不显示屏幕键盘的情况下专注于文本输入
我正在制作聊天服务，我想很好地支持移动设备。
在下面的屏幕截图中，有一个输入字段。它允许输入文本，并避免诸如“如果文本字段未聚焦输入什么都不做”之类的问题，它会在单击外部时自动聚焦——这确实改善了台式计算机的体验。但是，在带有软键盘的设备上，这会导致屏幕键盘出现在分散注意力的移动设备上。
考虑到单击任何地方聚焦文本输入，是否有可能使屏幕键盘仅在按下文本字段时出现？或者，以某种方式检测启用了软件键盘的设备并为它们禁用此功能。最好不要明确尝试检测移动设备、触摸屏或其他任何存在的带有硬件键盘的触摸屏设备。
这个问题我能够在 Android 上的 Google Chrome 和 Opera Mobile 中重现，显然它发生在 iPhone 上，尽管我没有设备可以测试它。
这是一个相当简单的问题示例。如果您触摸粉红色矩形，则会导致出现触摸键盘，这是我不想要的。
<input type=text id=f>
<div style="background: pink; height: 200px; width: 200px" onclick="f.focus()">推荐指数
解决办法
查看次数
使用 HTML/JS 接受/触发图像键盘 (GIF)
我们如何通过普通文本输入接受/触发图像键盘（如 Android 上的 GIF 键盘）？
HTML：
<input type="text">
当我尝试插入 gif 时，我得到
无法在此处输入此内容。
所以问题是我们如何触发用户插入一些 GIF 图像？
喜欢...
<input type="text" accept="..." oninput="...">
这个有可能？
资源： https : //developer.android.com/guide/topics/text/image-keyboard
推荐指数
解决办法
查看次数
DateTimeInput 在 django 中被渲染为简单的文本输入
我试图从用户那里获取日期时间输入，但日期输入的数据类型被设置为 type="text"
以下是代码片段：
模板：
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{form.stayFrom}}
<script>
$(function () {
$("#id_stayFrom").datetimepicker({
format: 'd/m/y',
});
});
</script>
</form>
形式.py：
class RoomApplicationForm(forms.ModelForm):
stayFrom = forms.DateTimeField(input_formats=['%d/%m/%y'])
class Meta:
model = Stay
fields = ('stayFrom')
模型.py：
class Stay(models.Model):
user = models.OneToOneField(Account, on_delete=models.CASCADE, primary_key = True)
stayFrom = models.DateTimeField(verbose_name="stay start date")
这是渲染的 html：
<input type="text" name="stayFrom" id="id_stayFrom" autocomplete="off">
你能指出我的代码中缺少什么吗？
推荐指数
解决办法
查看次数
标签 统计
html-input ×10
javascript ×7
html ×6
jquery ×2
android ×1
arrays ×1
browser ×1
datetime ×1
django ×1
dom-events ×1
focus ×1
gif ×1
image ×1
placeholder ×1
random ×1
reactjs ×1
safari ×1
tabbing ×1