美文网首页
关于contenteditable属性的一些测试

关于contenteditable属性的一些测试

作者: 吴高亮 | 来源:发表于2017-03-30 15:56 被阅读0次

    我直接就以HTML的格式进行写了;我会的这样更加容易看懂;

    关于HTML部分

    <div contenteditable class="editable">这里面的内容是可以编辑的</div>

    script部分

    editable.onfocus=function(){ console.log(editable.innerHTML); console.log(editable.innerText); console.log(editable); console.dir(editable); }

    支持以下事件;
    当失去焦点时;-editable.onblur=function(e){}事件
    当获取焦点时;-editable.onfocus=function(e){}事件
    但是常用的change事件是不支持的;
    个人觉得用它来代替textare标签已经足够了;


    下面写的东西是对前面的一些纠正

    关于form表单的新增属性的一些看法

    <h5>这是没有在form标签里面的</h5> <label for="autofocusinput">自动获取焦点的input</label> <input type="text" id=autofocusinut> <input type="text" autofocus="autofocus" id=autofocusinput>
    自己测试发现 自动获取焦点属性并不需要在form表单里面使用;
    测试了一下两种情况
    首先关于autofocus的属性;如果你写上是默认自动获取焦点的;另外就是;在同时有好多input同时使用个的话;只会找到第一个进行首次获取焦点


    <h5>这是在具有form标签包裹的情况下进行的</h5> <form> <input type="text" pattern="^[0-9]*$" required placeholder="请输入0-9的数字" > <input type="submit" value="必须是submit"> </form>
    在进行required验证的时候;有两点是必须的
    首先就是一定要在form内就行写入;
    第二呢就是用到的提交按钮一定要是submit;
    我觉得测试这个好傻;
    就直接在里面同时也测试了pattern;
    在使用正则的时候我想大家可能更多就是在在网上找到相应的匹配该规则;
    同样个人也建议使用;网上的匹配工具;

    相关文章

      网友评论

          本文标题:关于contenteditable属性的一些测试

          本文链接:https://www.haomeiwen.com/subject/tqhpottx.html