相关疑难解决方法(0)

如何防止机器人自动填写表格?

我正在尝试提出一个足够好的反垃圾邮件机制来防止自动生成的输入.我读过像captcha,1 + 1 =等技术?东西工作得很好,但他们也提出了一个额外的步骤阻碍了应用程序的免费快速使用(我不是在寻找类似的东西).

我已经尝试在我的所有表单中设置一些隐藏字段,display: none; 但是,我确定可以将脚本配置为跟踪表单字段ID并且根本不填充它.

您是否实施/了解了一种良好的防自动填充机器人方法?有没有什么可以与HTML和/或服务器端处理无缝地完成,并且(几乎)防弹?(没有JS就可以简单地禁用它).

我试图不依赖会话(即计算点击按钮的次数以防止过载).

forms spam

102
推荐指数
10
解决办法
10万
查看次数

从tabindex中删除Javascript/JQuery

在HTML表单上,我有INPUT文本框,后跟一个链接,然后是另一个INPUT文本框.我想从tabindex/tab顺序中删除链接:

<p>
<input type="text" name="field1" id="field1" value="" />
<a href="..a url.." id="link1">more info</a>
</p>

<p>
<input type="text" name="field2" id="field2" value="" />
</p>
Run Code Online (Sandbox Code Playgroud)

tab顺序是field1,link1,field2,我希望它在tabindex/order中完全没有link1的field1,field2.除了通过tabindex属性重新排序之外,还有什么方法可以完全删除tab1中的link1吗?

html javascript jquery tabindex

21
推荐指数
1
解决办法
2万
查看次数

tabindex -1不适用于子元素

我有一个div标签,其中包含一些内容.内部的内容可以具有可聚焦的按钮,锚元素等.我无法控制内容,但我可以修改'div'标签属性.

我的问题是即使我将tabIndex -1指定为div标签,焦点仍然是内容(锚点,按钮等).

<!-- HTML content here -->
<div tabindex="-1" id="externalContent">
  <div>
    ...
    <button>click me</button> <!-- Focus shouldn't come here -->
  </div>
</div>
<!-- HTML content here -->
Run Code Online (Sandbox Code Playgroud)

有没有办法在标签时跳过整个内容?它当然不能使用上面的代码.

html accessibility tabindex

12
推荐指数
3
解决办法
7293
查看次数

从TAB跳跃跳过焦点

我有一个包含各种html元素的段落.一些链接,一些输入框等.TAB按钮将焦点从当前元素更改为下一个html元素:它从链接跳转到链接.是否可以从TAB按钮设置一个特定的html元素从这样的焦点"跳过"?

html css jquery

11
推荐指数
1
解决办法
1万
查看次数

为什么`a`标签需要`tabindex = 0`?

我正在开发一个Web应用程序,其中一个重复a(锚点)元素在我浏览页面时没有得到键盘焦点.只有我添加tabindex=0可以选项卡.

(虽然我的目标是使焦点可见,但我通过使用jQuery片段来确定元素是否获得焦点:

// Whenever I hit tab, show me which element has focus
$('main').on('keydown',function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    console.log("focus is now on ", $(':focus'));
  } 
});
Run Code Online (Sandbox Code Playgroud)

)

这让我很困惑.根据规范,"tabindex属性也可以使任何元素成为交互式内容" - 但是a默认情况下它们列为交互式的一个.

再次,从可访问性文章:

[tabindex]值为0表示该元素应按默认导航顺序放置.这允许不可本机聚焦的元素(例如<div>,<span>和<p>)接收键盘焦点.当然,通常应该为所有交互元素使用链接和表单控件...(http://webaim.org/techniques/keyboard/tabindex)

当我浏览页面的交互元素时,会导致跳过锚元素的原因是什么?

html accessibility

10
推荐指数
1
解决办法
9731
查看次数

从Tab键顺序中删除HTML标记

在我的应用程序选项卡循环中,<html>标记占用制表位.我想<html>从tap循环中删除标签.

我尝试添加tabindex="-1"<html>标签,但至少在IE11上,似乎没有从标签循环中删除元素.我接近于使用JS来旋转我自己的逻辑,以"跳过"到下一个可聚焦元素document.activeElement === <html>,但是我想知道是否有更简单的方法.

需要跨主流浏览器支持该解决方案:IE11,Edge,FF,Chrome,Safari.

有任何想法吗?

html javascript

8
推荐指数
1
解决办法
367
查看次数

跳过只读文本框

我正在使用CSS使两个复选框看起来像一个...

input {
  font-family: serif;
  font-size: 1.3em;
  background: rgba(5, 1, 0, .7);
  /* Really good color!! */
  color: white;
}
.one {
  border: 1px solid black;
  border-radius: 3px 0px 0px 3px;
  border-right: none;
  width: 58px;
  padding: 14px;
  transition: all .7s ease-in;
}
.two {
  border: 1px solid black;
  border-radius: 0px 3px 3px 0px;
  text-decoration: none;
  border-left: none;
  width: 100px;
  text-align: right;
  padding: 14px;
  transition: all .7s ease;
}
input:focus {
  border: 1px solid black;
  box-shadow: 0px 0px 0px white;
  outline: …
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
1
解决办法
4342
查看次数

如何防止tab键跳到下一个表单域?

我遇到了一个问题:我正在构建一个页内多级表单。每个“阶段”都位于其自己的面板(div)上。我将通过 javascript(下一个/上一个按钮)浏览面板。每个面板都有自己的验证,如果当前面板未成功验证,则无法跳转到下一个面板。一切都很好。

问题是当用户开始使用选项卡从一个字段跳转到另一个字段时。当他到达当前面板的最后一个字段时,该选项卡会将他带到下一个面板。

因此,我需要的是避免每个表单的最后一个字段接受选项卡事件,或者避免从选项卡访问每个表单的第一个字段。或者类似的。

换句话说:如何仅对某些字段禁用 Tab 键?或者,如何将选项卡操作限制为表单中的一组特定字段?

我尝试了几种方法,但没有成功:

// on last panel field
$('.block-tab').on('keypress', function(e) { 
  if (e.keyCode == 9) e.preventDefault();
});

// on first panel field
$('.block-tab').on('keyup', function(e) { 
  if (e.keyCode == 9) e.preventDefault(); 
});
Run Code Online (Sandbox Code Playgroud)

html javascript forms

5
推荐指数
1
解决办法
1万
查看次数

JQuery对话框自动滚动到底部

我有一个对话框"弹出"框,可以加载图片和信息,每当我启动框时,页面会自动滚动到底部,不会让我向上滚动直到所有信息都加载完毕.我不知道为什么会这样做.有什么想法吗?

$( "#dialog-view" ).dialog({
        resizable: false,
        width:'auto',
        fluid: true,
        modal: true,
        autoOpen: false,

        buttons: 
            {
    "Done": function() 
    {
      $("#dialog-view").dialog("close");
    }
  }
});  
Run Code Online (Sandbox Code Playgroud)

jquery jquery-ui jquery-ui-dialog

1
推荐指数
1
解决办法
2352
查看次数

如何使用纯CSS控制关键TAB所针对的元素?

考虑以下代码:

button{background:yellow;}
button:focus{outline:red 5px solid;}

button:nth-of-type(1){color:green;}
button:nth-of-type(2){color:orange;}
button:nth-of-type(3){color:blue;}
button:nth-of-type(4){color:grey;}
button:nth-of-type(5){color:purple;}
Run Code Online (Sandbox Code Playgroud)
<section>
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
  <button type="button">Button 4</button>
  <button type="button">Button 5</button>
</section>
Run Code Online (Sandbox Code Playgroud)

请注意,当单击键盘上的键选项卡时,它会使焦点从第一个按钮跳到下一个按钮,依此类推到最后一个按钮,然后再移动到浏览器元素.

我的问题是当焦点在"底部2"时我是否有办法跳过"按钮3"并按下键标签?我很高兴知道有一个CSS属性来控制它,但如果不是javascript解决方案也欢迎.

html

0
推荐指数
1
解决办法
127
查看次数