删除mousedown上的复选框突出显示
在标签上按下鼠标后，复选框将突出显示。我想删除这个效果。到目前为止，我在preventDefault()事件的偶数上尝试onMouseDown，但它不会影响突出显示。
（上方复选框突出显示/更暗 - 对标签上的mousedown事件产生影响）
除了在点击标签后没有突出显示复选框的开/关行为时，不应该保持不受影响。
额外信息：我无法通过修改复选框的样式来实现它，因为下一步我只想对标签的一部分使用非突出显示行为（特别是标签内的链接）。
JSFiddle展示了这个问题：http://jsfiddle.net/o59udsLk/1/
6 个答案:
答案 0 :(得分：5)
您无法控制标签上mousedown复选框的效果，因为这是操作系统生成的效果。为此，您需要使用CSS样式＆amp;更改复选框的外观。字体（也许）。
自定义CSS复选框：
body {
background: #e6e6e6;
}
h1 {
margin-top: 0;
}
.control-group {
display: inline-block;
width: 200px;
height: 210px;
margin: 10px;
padding: 30px;
text-align: left;
vertical-align: top;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
/* Hover and focus states */
.control input:focus ~ .control__indicator {
background: #ccc;
}
/* Checked state */
.control input:checked ~ .control__indicator,
.control input:checked ~ .control__indicator:hover {
background: #2aa1c0;
}
/* Disabled state */
.control input:disabled ~ .control__indicator {
pointer-events: none;
opacity: .6;
background: #e6e6e6;
}
/* Check mark */
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
/* Show check mark */
.control input:checked ~ .control__indicator:after {
display: block;
}
/* Checkbox tick */
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}<div class="control-group">
<h1>Checkboxes</h1>
<label class="control control--checkbox">First checkbox
<input type="checkbox" checked="checked"/>
<div class="control__indicator"></div>
</label>
<label class="control control--checkbox">Second checkbox
<input type="checkbox"/>
<div class="control__indicator"></div>
</label>
<label class="control control--checkbox">Disabled
<input type="checkbox" disabled="disabled"/>
<div class="control__indicator"></div>
</label>
<label class="control control--checkbox">Disabled & checked
<input type="checkbox" disabled="disabled" checked="checked"/>
<div class="control__indicator"></div>
</label>
</div>
希望这有帮助！
答案 1 :(得分：2)
您是否尝试过使用 frame.addWindowFocusListener(new WindowFocusListener() {
@Override
public void windowGainedFocus(WindowEvent e) {
if (e.getOppositeWindow()==null) {
<do something when we gain focus>
}
}
@Override
public void windowLostFocus(WindowEvent e) {
<do something else when we lose focus>
}
});
？
import java.util.Scanner;
public class namessplit{
public static void main(String args[]){
String fullName="";
String[] str;
String firstName="";
String lastName="";
Scanner scanner=new Scanner(System.in);
System.out.println("Enter the full name:");
fullName=scanner.nextLine();
System.out.println("The names after split is:");
int spacePos = fullName.indexOf(" ");
firstName = fullName.substring(0,spacePos);
lastName = fullName.substring(spacePos,fullName.length() );
System.out.println(firstName+"' "+lastName);
}
}
如下所示 -
outline: noneinput[type=checkbox] {
outline: none;
}
$('label[for="startClientFromWebEnabled"]').mousedown(function(e) {
console.log('mouse down!!')
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
更新了jsfiddle - http://jsfiddle.net/o59udsLk/6/
希望这会以某种方式帮助你（y）。
答案 2 :(得分：2)
使用虚拟复选框，并在检查原件时检查虚拟复选框
$('#startClientFromWebEnabled').click(function(e) {
$('#dummy').prop('checked', $('#startClientFromWebEnabled').is(":checked"));
});body{
zoom:300%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<label for="startClientFromWebEnabled">Client Launch From Web:</label>
</td>
<td>
<input type="checkbox" id="dummy" />
<input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" style="display:none;" />
</td>
<td>
</td>
</tr>
</table>
更新
要禁用，请单击复选框，使用跨度
$('#startClientFromWebEnabled').click(function(e) {
$('#dummy').prop('checked', $('#startClientFromWebEnabled').is(":checked"));
});
$('td:nth-child(2) > span').click(function(e) {
$('#startClientFromWebEnabled').click();
});
$('td:nth-child(2) > span').css('width',$('td:nth-child(2)').outerWidth()).css('height',$('td:nth-child(2)').outerHeight());body{
zoom:300%;
}
td:nth-child(2) > span {
display: block;
position: absolute;
height: 10px;
vertical-align: middle;
line-height: 64px;
z-index:10;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="startClientFromWebEnabled">Client Launch From Web:</label>
</td>
<td>
<span></span>
<input type="checkbox" id="dummy" />
<input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" style="display:none;" />
</td>
<td>
hai
</td>
</tr>
</table>
解决方案
（没有任何虚拟复选框）
使用css :before使用2个叠加（一个用于标签td，另一个用于复选框td）并计算它们的宽度和宽度。 jquery中的高度
$('td').click(function(e) {
toggleCheckbox();
});
$('<style>td:nth-child(2):before{width:' + $('td:nth-child(2)').outerWidth() + 'px;height:' + $('td:nth-child(2)').outerHeight() + 'px}</style>').appendTo('head');
$('<style>td:nth-child(1):before{width:' + $('td:nth-child(1)').outerWidth() + 'px;height:' + $('td:nth-child(1)').outerHeight() + 'px}</style>').appendTo('head');
function toggleCheckbox(){
chkBox=$('#startClientFromWebEnabled');
chkBox.prop("checked",!chkBox.prop("checked"));
}
body{
zoom:300%;
}
td:before{
display: block;
position: absolute;
height: 10px;
vertical-align: middle;
line-height: 64px;
content:' ';
z-index:10;
width:attr(data-width);
height:attr(data-height);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="startClientFromWebEnabled">Client Launch From Web:</label>
</td>
<td>
<input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" />
</td>
</tr>
</table>
另一个简单的解决方案：
在标签和复选框上使用pointer-events: none;并通过其td
处理点击事件
$('td:has(input:checkbox, label[for!=""])').addClass('test');
$('td.test').click(function(e) {
toggleCheckbox(this);
});
function toggleCheckbox(tis){
var chkBox;
if($(tis).find("input:checkbox").length>0)
chkBox=$(tis).find("input:checkbox").first();
else if($(tis).find('label[for!=""]').length>0)
chkBox=$('#'+$(tis).find('label[for!=""]').first().prop('for'));
chkBox.prop("checked",!chkBox.prop("checked"));
}
body{
zoom:300%;
}
td.test > label,td.test > input {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="startClientFromWebEnabled">Client Launch From Web:</label>
</td>
<td>
<input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" />
</td>
</tr>
</table>
（没有任何虚拟复选框）
使用css :before使用2个叠加（一个用于标签td，另一个用于复选框td）并计算它们的宽度和宽度。 jquery中的高度
$('td').click(function(e) {
toggleCheckbox();
});
$('<style>td:nth-child(2):before{width:' + $('td:nth-child(2)').outerWidth() + 'px;height:' + $('td:nth-child(2)').outerHeight() + 'px}</style>').appendTo('head');
$('<style>td:nth-child(1):before{width:' + $('td:nth-child(1)').outerWidth() + 'px;height:' + $('td:nth-child(1)').outerHeight() + 'px}</style>').appendTo('head');
function toggleCheckbox(){
chkBox=$('#startClientFromWebEnabled');
chkBox.prop("checked",!chkBox.prop("checked"));
}body{
zoom:300%;
}
td:before{
display: block;
position: absolute;
height: 10px;
vertical-align: middle;
line-height: 64px;
content:' ';
z-index:10;
width:attr(data-width);
height:attr(data-height);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="startClientFromWebEnabled">Client Launch From Web:</label>
</td>
<td>
<input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" />
</td>
</tr>
</table>
另一个简单的解决方案：
在标签和复选框上使用pointer-events: none;并通过其td
$('td:has(input:checkbox, label[for!=""])').addClass('test');
$('td.test').click(function(e) {
toggleCheckbox(this);
});
function toggleCheckbox(tis){
var chkBox;
if($(tis).find("input:checkbox").length>0)
chkBox=$(tis).find("input:checkbox").first();
else if($(tis).find('label[for!=""]').length>0)
chkBox=$('#'+$(tis).find('label[for!=""]').first().prop('for'));
chkBox.prop("checked",!chkBox.prop("checked"));
}body{
zoom:300%;
}
td.test > label,td.test > input {
pointer-events: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="startClientFromWebEnabled">Client Launch From Web:</label>
</td>
<td>
<input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" />
</td>
</tr>
</table>
答案 3 :(得分：1)
您需要从标签和脚本中删除for=""，请参阅更新的小提琴
答案 4 :(得分：1)
我不认为，可以防止所有浏览器/系统中的突出显示 preventDefault（）可以在Firefox中运行，但不能在Chrome中运行。
但重点是什么？！ 点击并按住几秒钟。只有这样才能感受到风格的变化 这不是风格。不是吗？
您写道：
额外信息：我无法通过修改复选框的样式来实现它， 因为下一步
我只想使用非突出显示行为 for ...标签内的链接......
解决方案1：
所以你可以通过将标签分成几部分来实现你的目标：
- 链接前的标签
- 链接
- 链接后的标签
点击链接时，如果您不想，则复选框不会发生任何变化。如果需要，您可以附加活动。
与此代码类似：（http://jsfiddle.net/o59udsLk/5/）
$('label[for="startClientFromWebEnabled"]').mousedown(function(e) {
console.log('mouse down!!')
// remove highlighting in Firefox but not in Chrome
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
$('a').click(function(e) {
console.log('link clicked!!')
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<label for="startClientFromWebEnabled">(with preventDefault) before </label>
<a href="#">link</a>
<label for="startClientFromWebEnabled"> after</label>
</td>
<td>
<input type="checkbox" id="startClientFromWebEnabled"
name="startClientFromWebEnabled"
data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" />
</td>
</tr>
<tr>
<td>
<label for="compareWithMe">(without preventDefault) before </label>
<a href="#">link</a>
<label for="compareWithMe"> after</label>
</td>
<td>
<input type="checkbox" id="compareWithMe" name="compareWithMe"/>
</td>
</tr>
</table>
解决方案2：
其他解决方案可能是使用自定义复选框替换默认复选框。你可以更好地控制外观。
例如：
.customCheckbox input[type="checkbox"] {
display: none;
}
.customCheckbox span {
width: 11px;
height: 11px;
margin: 3px;
border-radius: 3px;
border: 1px solid gray;
display: inline-block;
vertical-align: middle;
background: white;
}
.customCheckbox :checked+span {
background: green;
}<label class="customCheckbox">
(custom Checkbox) before
<a href="#" onclick="console.log('link clicked')">link</a>
after
<input type="checkbox" id="inputInsideLabel" name="inputInsideLabel"/>
<span></span>
</label>
还有许多其他自定义复选框和其他表单元素
“font awesome”的其他例子：https://codepen.io/jamesbarnett/pen/yILjk
或者在这里：example with bootstrap and font awesome
答案 5 :(得分：1)
将标签更改为范围，然后删除for =＆＃34; startClientFromWebEnabled＆＃34;
你说＆＃34;下一步我想对标签的一部分（特别是标签内的链接）使用无突出显示行为。＆＃34;
然后，您可以编辑跨度的某些部分以将其置于标签内，并使用for =＆＃34; startClientFromWebEnabled＆＃34;对于可点击的部分。
<td>
<span><label for="startClientFromWebEnabled">[click]</label> Client Launch <label for="startClientFromWebEnabled">[click]</label> From Web:</span>
</td>
<td>
<input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" />
</td>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？