小编Tak*_*Isy的帖子
HTML5输入类型=数字更改步骤行为
如果我使用type ="number"的输入字段,其中step ="100".我不希望奇数无效.我只想增加或减少值为1000.
<input type="number" min="100" max="999999" step="100" />
如果用户输入值"199"并提交,则他/她会收到错误,因为该值不能被100分割.但我想要的步骤值是控制微调器的行为,例如,如果用户点击我希望值199变为200,如果他/她点击,我希望它变为100.或者理想情况下,我希望值增加或减少值为100.
我该怎么做呢？我尝试使用无效事件(使用jQuery 1.7.2),如下所示:
$( "[type='number']" ).bind( 'invalid', function( e ) {
var el = $( this ),
val = el.val( ),
min = el.attr( 'min' ),
max = el.attr( 'max' );
if ( val >= min && val <= max ) {
return false;
}
} );
但这导致表单未提交.
PS.:这是在Fedora 16上的Google Chrome 20.0.1132.57中.
推荐指数
解决办法
查看次数
防止CSS工具提示退出页面/窗口
我有一个仅限CSS的工具提示,span当你hover链接时它会加载一个工具提示.然而,这是使用CSS定位的,但如果链接靠近页面顶部或侧面,则工具提示会从页面的侧面/顶部移开.
是否有一种方法可以使用css进行此更改,还是我必须依赖JS？我已经开始尝试将一些东西与jQuery放在一起但是如果可能的话宁愿使用CSS.
JS小提琴在https://jsfiddle.net/gtoprh21/12/
片段:
$( ".ktooltip" )
.mouseover(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
if((mousey+100)>$(window).height())
{
$('.tooltip')
.css({ top: mousey-100 ,left: mousex })
}
else if((mousex+200)>$(window).width())
{
$('.tooltip')
.css({ top: mousey ,left: mousex-200})
}
else
{
$('.tooltip')
.css({ top: mousey, left: mousex })
}
}).ref, .refs {
position:relative;
}
/*added a text indent to overide indent styles further down*/
.ktooltip { …推荐指数
解决办法
查看次数
用引号替换双引号
我正在寻找一种方法来替换用户输入中"更正"引号的引号.
这个想法
这里有一个简要说明原则的片段:
对于引号,"正确"的引号有开启“和关闭”,因此需要以良好的方式进行替换.
$('#myInput').on("keyup", function(e) {
// The below doesn't work when there's no space before or after.
this.value = this.value.replace(/ "/g, ' “');
this.value = this.value.replace(/" /g, '” ');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="myInput"></textarea>但上述情况并非在所有情况下都有效.
例如,当"引用的单词"位于句子或行的开头或结尾时.
例子
可能的输入(小心,法语里面!:)):
⋅我很开心!Çayest,j'ai"osé",et mon"âmesœur"étaitaurendez-vous ...
⋅标语上写着:"有些文字"有些文字"有些文字".并"注意这里的空间!"
⋅"Inc"或"rect"quo"tes should"不得更换.
⋅我说:"如果它也适用于'单身',我会更喜欢它!"
正确的输出:
⋅我"快乐"!Çayest,j'ai"osé",et mon"âmesœur"étaitaurendez-vous ...
⋅标志上写着:"有些文字"有些文字"有些文字."和"注意这里的空间!"
⋅"Inc "或"rect"quo"tes应"不应被替换".
⋅我说:"如果它也适用于'单身',我会更喜欢它!"
输出不正确:
⋅标志上写着:"有些文字"有些文字"有些文字."和[...]
为什么不正确:
→报价单的末尾和结束标记之间不应有空格.
→在右引号和单词之间应该有一个空格.
→单词和开头引号之间应该有一个空格.
→开头引号与其报价之间不应有空格.
需要
在所有这些情况下,如何才能有效和轻松地替换报价？
如果可能的话,我也希望解决方案能够"纠正"引号,即使我们在整个句子输入后添加它们也是如此.
请注意,我不能(不能)在正则表达式中使用单词分隔符"\ b",因为"重音字符,例如"é"或"ü"不幸被视为单词分隔符."(来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
当然,如果没有其他解决方案,我会想出一个我认为是单词分隔符的列表并在正则表达式中使用它.但我更喜欢有一个很好的工作功能而不是列表!
任何想法将不胜感激.
推荐指数
解决办法
查看次数
在jQuery中修改CSS变量/自定义属性
在我的应用程序中,我有一些参数,我想用jQuery放入CSS变量.我也想读它们.
我在阅读CSS变量的值时遇到了麻烦,尝试了很多事情......在我输入问题时,我在"可能已经有你的答案的问题"中找到了解决方案.
无论如何,我附上了一个片段,因为我需要知道:
⋅⋅⋅为什么方法1不起作用？
⋅⋅⋅有没有办法使用jQuery获取CSS var值？
我觉得它缺乏处理CSS变量的简单解决方案......我错了吗？
当然,如果没有任何办法我会使用javascript解决方案.但我想确定一下.
提前感谢您的回答.
// This method doesn't work for writing CSS var.
$(":root").css("--color1", "red");
console.log(".css method on “:root” :", $(":root").css("--color1"));
// This methods works for writing CSS var:
$(":root")[0].style.setProperty("--color2", "lime");
console.log("[0].style method on “:root” :", $(":root")[0].style.getPropertyValue('--color2'));#p1 {
background-color: var(--color1);
}
#p2 {
background-color: var(--color2);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body id="bodyID">
<p id="p1">p with background --color1</p>
<p id="p2">p with background --color2</p>
</body>
<html>推荐指数
解决办法
查看次数
带有箭头的CSS滑块使用动画
我正在尝试实现仅限CSS的滑块.
当hover向左和向右箭头时,滑块必须滑动.当然.
我尝试了一些东西animation-play-state,animation-fill-mode(以保持位置),animation-direction但我不能完全使它工作.
- 从箭头开始
animation-play-state: paused,hover将其更改为running. - 在
hover右箭头上,一切都很好.我们可以盘旋,离开,再次盘旋. - 但是,只要我
hover的左箭头(更改animation-direction到reverse),它的破碎.
简化代码段:
.wrapper {
overflow: hidden;
position: relative;
width: 500px;
}
.arrows {
z-index: 2;
position: absolute;
top: 0;
height: 100%;
background: #ddd;
opacity: 0.66;
}
.arrows:hover {
opacity: 1;
}
.arrow-l {
left: 0;
}
.arrow-r {
right: 0;
}
.sliding {
height: 160px;
width: 2000px;
background: linear-gradient(to …推荐指数
解决办法
查看次数
根据其索引号样式化元素
我一直在尝试一些事情，但没有找到完全适合我想要做的事情。
以下代码段是我想要实现的目标……
ul {
--liWidth: 10px;
}
ul li {
margin-left: calc(var(--liWidth) * var(--n));
font-size: calc(20px - 1px * var(--n));
}<ul>
<li style="--n: 1;">LI 1</li>
<li style="--n: 2;">LI 2</li>
<li style="--n: 3;">LI 3</li>
<li style="--n: 4;">LI 4</li>
<li style="--n: 5;">LI 5</li>
<li style="--n: 6;">LI 6</li>
<li style="--n: 7;">LI 7</li>
<li style="--n: 8;">LI 8</li>
</ul>…但是不用我的nCSS-var。
为什么？如果使用一百li秒，我不想输入。
有什么margin-left: calc(var(--liWidth) * nth-of-type());可能的吗？
如果不是，最简单的方法是不使用JavaScript？（我已经知道如何使用它）
提前致谢。
推荐指数
解决办法
查看次数
为什么使用绝对位置会导致 div 位于顶部？
请看下面这个非常简单的片段来说明我的问题：
\n\n#container {\r\n position: relative;\r\n padding: 20px;\r\n border: 2px solid gray;\r\n}\r\n\r\n#back {\r\n position: absolute;\r\n top: 0;\r\n bottom: 50%;\r\n left: 0;\r\n right: 0;\r\n background-color: #bbb;\r\n}<div class="col-sm-12" id="container">\r\n <div id="back"></div>\r\n <h1>Some Text</h1>\r\n</div>在 HTML 代码中，标记h1位于元素之后。back
由于我没有改变它的position属性，所以它一定是static。\n而且，据我所知，static元素是根据页面的流程定位的。
那么\xe2\x80\xa6 为什么绝对定位div 显示在其同级之上h1？
我期待在后面看到它，h1因为它是第一位的。
请注意，我知道如何纠正这种行为，我只是问为什么！
\n\n带有更正的片段：
\n\n#container {\r\n position: relative;\r\n padding: …推荐指数
解决办法
查看次数
在浏览器控制台中使用 JavaScript 将颜色代码更改为另一个颜色代码
我是一名网页设计师。
当我浏览网站时，我喜欢更改一些颜色，并查看更改主颜色时网站的外观。
我使用“检查元素”来做到这一点。但这是非常耗时的工作，因为我需要添加大量代码来更改各处。
是否有任何 JavaScript 代码可以使用浏览器控制台将一种颜色代码更改为另一种颜色代码。
基本上我想要的是像下面这样的......
使用浏览器控制台将此站点中所有位置的 #FFF8DC 颜色更改为 #e6dfc6 颜色。
推荐指数
解决办法
查看次数
将文本与字体真棒图标对齐
我试图垂直对齐我的FontAwesome图标旁边的文本.我可以用padding-left手动完成,但这似乎不对.
有更简单的方法吗？
<div class="row">
<div id="tb-testimonial" class="testimonial testimonial-default">
<div class="testimonial-section">
<div class="col-xs-12 col-sm-6">
<ul>
<i class="fas fa-snowflake"></i> A/C service<br/>
<i class="fa fa-angle-right"></i> Aut-gear service<br/>
<i class="fas fa-car-side"></i> Bil-leasing<br/>
<i class="fas fa-car"></i> Bil-salg<br/>
<i class="fas fa-oil-can"></i> Bilsyn<br/>
<i class="fa fa-angle-right"></i> BMW Keyreader<br/>
<i class="fa fa-angle-right"></i> BMW-testudstyr (ISTA)<br/>
<i class="fas fa-book"></i> Digital servicebog<br/>
<i class="fas fa-hotel"></i> Dækhotel<br/>
</ul>
</div>
<div class="col-xs-12 col-sm-6">
<ul>
<i class="fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding<br/>
<i class="fa fa-angle-right"></i> Klassiske biler<br/>
<i class="fas fa-mug-hot"></i> Kundelounge<br/>
<i class="fa fa-angle-right"></i> …推荐指数
解决办法
查看次数
回报''; 并返回; 在javascript中
我是Javascript的新手.我的队友正在使用return '';和执行return;职务.不过,我不知道它们之间的区别.
任何人都可以澄清差异和用例吗？
function function1() {
return '';
}
function function2() {
return;
}推荐指数
解决办法
查看次数
标签 统计
css ×7
javascript ×6
html ×4
jquery ×4
css3 ×2
browser ×1
colors ×1
css-position ×1
font-awesome ×1
function ×1
html5 ×1
input-field ×1
regex ×1
tooltip ×1