小编gfu*_*lam的帖子

关于执行以下操作的做法存在一些争议:

a, input, textarea, button {
    outline: none;
}

可访问性问题是一个常见问题.

我不打算完全删除此功能(如上面的代码所示); 但是,这个功能通过在不受欢迎的区域添加非预期的边框(嗯,轮廓？)而极大地混淆了我的原始设计.

主要问题是这些轮廓实际上遵循元素周围的矩形区域,而不是其轮廓(即它忽略边界半径等).

例:

div {
    margin: 64px;
}

input {
    font-size: 20px;
    border-radius: 16px;
    border: 2px solid #CCC;
    padding: 2px 12px;
}

button {
    font-size: 20px;
    border-radius: 32px;
    text-transform: uppercase;
    color: #FFF;
    border: 2px solid #CCC;
    background: #CCC;
    padding: 6px 3px;
    cursor: pointer;
}

<div>
    <input type="text" placemark="Search query..."/>
    <button>Go</button>
</div>

我所知道的唯一解决方案是运行上面的代码并使用我自己的系统.

采用这种方法时最佳做法是什么？

我无法在jsfiddle.net中从github加载mustache.js,所以我下载了该文件并尝试在本地机器上:

var output = Mustache.render(

    "{{#arr}} {{.}} \n{{/arr}}", 

    {
        arr : [1, 3.12, NaN, Infinity, -Infinity, 0, -0, null, "", " ", "0", 
               true, false, undefined, "hee"]
    }

);

console.log(output);

令我惊讶的是[object Object],尽管官方文档说明了这{{.}}一点string,但虚假的价值观也是如此.数字1和3.12实际上很好.请注意,它们是数字的原始类型,而不是字符串.console.log显示:

 1 
 3.12 
 [object Object] 
 Infinity 
 -Infinity 
 [object Object] 
 [object Object] 
 [object Object] 
 [object Object] 

 0 
 true 
 [object Object] 
 [object Object] 
 hee 

我想知道为什么包含有效字符串的虚假值""显示为[object Object]？

如果我做到了arr : ["ha", "hee", "", "wah"],那么所有琴弦都会很好,但是第3个也出来了[object Object].

如果它适用"ha",为什么它不起作用 …

我为tinymce编写了一个插件，该插件打开一个由URL加载的弹出窗口（它将弹出窗口创建为iframe）。当我单击此窗口中的按钮时，我想从此弹出窗口访问元素值（此元素是具有图像URL的锚标记），并将其作为图像加载到tinymce编辑器中。我怎样才能做到这一点？

我的插件代码：

tinymce.PluginManager.add('fileuploader', function(editor, url) {

    editor.addButton('fileuploader', {
        text: 'Upload Image',
        icon: false,
        onclick: function() {
            // Open window with a specific url
            editor.windowManager.open({
                title: 'Upload Image',
                url: 'http://localhost:8080/upload-file',
                width: 500,
                height: 100,
                buttons: [{
                    text: 'Done',
                    onclick: function(e) {
                        editor.insertContent('Title: ' + document.getElementById("fileUrl"));
                        top.tinymce.activeEditor.windowManager.close();
                    }
                }]
            });
        }
    });

我正在尝试将TinyMCE(版本4.0.12)中的内容的默认方向设置ltr为rtl.

我正在使用directionality配置:

directionality: 'rtl',

...但是编辑器似乎忽略了它,并且默认光标位置仍在左边,内容是ltr.

我还尝试使用RTL语言进行TinyMCE,但是左边的默认光标位置得到了相同的结果,内容是ltr.

问题是什么？

如何让TinyMCE的默认内容方向从右向左？

我想测试一个方法是否在使用酶和sinon-mocha的React组件中的一定时间间隔后被调用.

反应组件

var TestComp = React.createClass({
    myFunc: function() {
        console.log('I am called');
    }
    componentDidMount: function() {
        this.timer = window.setTimeout(myFunc, 2000);
    }
    componentWillUnmount: function() {
        clearTimeout(this.timer);
    }
})

单元测试

var clock;

before(function () {
    clock = sinon.useFakeTimers();
});

after(function () {
    clock.restore();
});

it('myFunc is called once', function() {
    spy(TestComp.prototype, 'myFunc');

    var wrapper = mount(<TestComp/>);

    clock.tick(3000);

    expect(TestComp.prototype.myFunc.calledOnce).to.equal(true);
});

错误

它会抛出断言错误.测试在定时事件中崩溃,我在包装器节点上使用一些控制台日志识别出来.它表示堆栈跟踪错误.但是,测试用例会触发myFunc,这从控制台日志中可以看出.

我该如何捕捉myFunc电话？有谁知道它为什么会发生？

控制台错误与此https://github.com/sinonjs/sinon/issues/87#issuecomment-8547823相同

更新

堆栈跟踪:

'Error: Stack Trace for original
at Object.wrapMethod
at spy
at Context.<anonymous> …

我想使用JavaScript来检查一个div元素(可以被拖动)是否正在触及另一个div元素.

这是一些代码:

<div id="draggable" style="position: absolute;  top: 100px; left: 200px; background-color: red;  width: 100px; height: 100px;"></div>
<div style="background-color: green; width: 100px; height: 100px;"></div>

可以这样做吗？

如果是这样,怎么样？

编辑:我不想使用jQuery,只是简单的旧JavaScript!

我有一个可变深度的JSON文档.一个例子:

[
    {
        "type": "firsttype",
        "text": {
            "id": "content"
        }
    }
]

我想要做的是检索某些键的值,比方说text.由于我不知道这些密钥在.JSON中可能出现在哪里,我需要使用递归函数.然后我尝试在HTML文件中显示这些键和值.

我在这里有一个初步的尝试:

$.getJSON("file.json", function getText (oValue, sKey) {
    links = [];
    if (typeof oValue == "object" || typeof oValue == "array") {
        for (i in oValue) {
            getText (oValue [i], i);
        }
    } else {
        links.push ( "<li id='" + oValue + "'>" + sKey + "</li>" );
    }

    $( "<ul/>", {
        "class": "my-new-list",
        html: links.join( "" )
    }).appendTo( "body" );
});

当我在本地或远程或加载页面时python -m SimpleHTTPServer …

我对阅读正则表达式还很陌生，但发现很难阅读。我记得在找到一个网站之前会将正则表达式转换为语法图。不过，我已经尝试了好几次才能再次找到它。所以我越来越担心我可能只是想像得到的。

我想知道是否有人知道能够将正则表达式转换为语法图的工具或网站？

谢谢。

我在网址中看到过：

https://www.w3.org/TR/MathML3/

我也在Can I Use上看到过

缩写CR和TR在 W3C 上下文中代表什么？

我必须为PlayerList容器和Player组件编写单元测试用例.为分支和道具编写测试用例是可以的,但是如何测试组件的方法及其中的逻辑.我的代码覆盖率不完整,因为没有测试方法.

场景:

父组件将对其方法的引用onSelect作为对子组件的回调传递.该方法在PlayerList组件中定义,但Player正在生成调用它的onClick事件.

父组件/容器:

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {selectTab} from '../actions/index';
import Player from './Player';

class PlayerList extends Component {    
    constructor(props){
        super(props);
    }

    onSelect(i) {
        if (!i) {
            this.props.selectPlayer(1);
        }
        else {
            this.props.selectPlayer(i);
        }
    }

    createListItems(){      
        return this.props.playerList.map((item, i)=>{
            return (                
                    <Player key={i} tab={item} onSelect={() => this.onSelect(item.id)} />
                )
        });
    }

    render() {
        return(
            <div className="col-md-12">
                <ul className="nav …

关于TinyMCE(v.3.5.11)默认粘贴功能,我有两个相关的问题:

粘贴时为什么没有文本？

将文本粘贴到编辑器后,内容在编辑器中可见,但不能通过该.getContent()方法获得.为什么？

在此活动期间,我可以强制TinyMCE获取它在编辑器中显示的文本吗？

为什么Ctrl+会V触发更改事件,但上下文菜单粘贴却没有？

如果使用键组合Ctrl + V将文本粘贴到编辑器中,onPaste则会触发第一个TinyMCE的事件,并且文本不可用.getContent()(如上所述); 紧随其后,onChange事件被触发,现在可以通过该.getContent()方法获得文本.

但是,如果您通过右键单击鼠标将文本粘贴到编辑器中,然后从上下文菜单中选择粘贴,onPaste则会触发TinyMCE的事件,但不会onChange.

为什么不同？关于这个还能做什么？

有关工作示例,请参阅此JSFiddle.

注意:我没有使用粘贴插件,所以请不要提供它或任何其他插件作为答案.我有兴趣创建自己的解决方案.

我正在尝试制作倒计时时钟,当用户点击按钮时,它会启动计时器.但是,现在,只要页面加载,倒计时就会开始.我怎么能等到用户真正按下id='startCountdown'按钮才能启动countdown.我是JavaScript新手,非常感谢一些反馈.

.js代码:

// Wait for webpage to load
$(document).ready(function(){
  var sessionTime = 1;
  var breakTime = 5;

  // Update session and break times with pre-defined variables
  $('#session-time').text(sessionTime);
  $('#rest-time').text(breakTime);

  // jQuery click functions for increasing and decreasing time
  $('#decrease-session').on('click', downSession);
  $('#increase-session').on('click', upSession);
  $('#decrease-rest').on('click', downBreak);
  $('#increase-rest').on('click', upBreak);


  // Decrease the length of each session
  function downSession() {
    sessionTime--;
    $('#session-time').text(sessionTime);
    $('#countdown-time').text(sessionTime);
  }

  // Increase the length of each session
  function upSession() {
    sessionTime++;
    $('#session-time').text(sessionTime);
    $('#countdown-time').text(sessionTime);
  }

  // Decrease the …