关于开发在线网页编辑器按回车会输入<p>而不是<br>的解决方法

<DIV ID="a" contentEditable="true" style='border:1 solid black'>其实以前早有很多人讨论过,代码比较多方法太可怕,自己用不到就没时间去研究,现在帮你试了一下,其实解决起来很简单了:)<p>关于微软HTML编辑控件单击回车会插入&lt;p>而不是&lt;br>的解决方案</DIV> <p>
<div style='border:1 solid black' contentEditable="true">未经过脚本处理的编辑控件</div>
<script>
//*********************************
//原作者:风云舞,原出处: http://www.lshdic.com/bbs
//本程序需要IE浏览器版本高于IE5.5才能正常调试,另移植到iframe上道理应该相同
//*********************************
function a.onkeypress(){ 
if(event.keyCode==13){
var txtobj=document.selection.createRange()
txtobj.text==""?txtobj.text="/n":(document.selection.clear())&(txtobj.text="/n") //三目复合表达式,解决有被选文字时回车的光标定位问题
document.selection.createRange().select()
return false
}}
</script>
任务描述 本关任务:掌握并运用 v-on 指令,明白如何给元素添加事件处理。 相关知识 为了完成本关任务,你需要掌握:1. v-on 的使用方法 2. v-on 的修饰符 v-on 使用方法 开发的过程中我们需要经常用到事件处理,单击和按键的事件很常见。Vue提供了 v-on 监听DOM事件,将方法通过 v-on 绑定到DOM节点即可。 v-on 的语法糖是 @。所以单击事件可以写作 @click ,按键事件可以写作 @keyup 。代码示例如下:使用 v-on 监听点击按钮事件,触发事件时数据会发生变化。 <div id="app"> <button v-on:click="message = '关闭'">{{message}}</button> <button @click="messageSim = '关闭'">{{messageSim}}</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'打开', messageSim: '使用语法糖' } }) </script> 然而,在实际开发中,我们所要监听事件的代码逻辑是复杂的,直接写在 v-on 中肯定是不合适的。这时就可以用Vue的方法选项 methods ,调用方法的几种情况有: 1、小括号可以省略: 1)方法不需要参数。 2)方法只要事件对象本身作为参数。 2、小括号不可以省略: 方法需要的除了 event 对象,还有其他参数。event 对象写作 $event,其他参数要用引号,否则会被当成变量。 示例代码如下,结果如图1所示。 <div id="app"> <!-- 在事件监听并且方法不需要额外参数的时候,括号可以不写 --> <button v-on:click="changeData">{{message}}</button> <!-- 在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候,Vue会默认将浏览器生产的event事件对象作为参数传入到方法 --> <button @click="eventOrgOne">一个事件对象参数</button> <!-- 在方法定义时,除了event对象,同时又需要其他参数--> <!-- 在调用方式,如何手动的获取到浏览器产生的event对象:$event --> <button @click="orgMore('abc',$event)">多个参数</button> <!-- abc要加引号,否则会被当成变量 --> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '打开' }, methods: { changeData () { this.message === '打开' ? this.message = '关闭' : this.message = '打开' }, eventOrgOne (event) { console.log("-----", event); }, orgMore (val, event) { console.log("---", val, event); } } }) </script> 图 1 调用方法示例结果 修饰符 开发时我们可能会需要阻止节点的默认行为、阻止事件冒泡等。Vue提供了修饰符来实现这些需求。虽然使用方法也可以实现,但方法最好只包含数据逻辑,不要处理DOM事件细节。 • 常见修饰符 当事件后缀多个修饰符时,要注意修饰符的排列顺序。 名称 可用版本 可用事件 说明 .stop 所有 任意 当事件触发时,阻止元素默认行为 .prevent 所有 任意 当事件触发时,阻止元素默认行为 .capture 所有 任意 当事件触发时,阻止事件捕获 .self 所有 任意 限制事件仅作用于节点自身 .once 2.1.4以上 任意 事件被触发一次后即解除监听 .passive 2.3.0以上 滚动 移动端,限制事件永不调用preventDefault()方法 键盘按键修饰符 对于键盘事件,Vue允许将按键键值作为修饰符来使用。 别名修饰符 键值修饰符 对应按键 .delete .8/.46 回格/删除 .tab .9 制表 .enter .13 回车 .esc .27 退出 .space .32 空格 .left .37 左 .up .38 上 .right .39 右 .down .40 下 鼠标按键修饰符 修饰符 可用版本 对应按键 .left 2.2.0以上 左键 .right 2.2.0以上 右键 .middle 2.2.0以上 中键 组合修饰符 按住多键,或者鼠标与键盘共用。 修饰符 可用版本 对应按键 .ctrl 2.1.0以上 Ctrl键 .alt 2.1.0以上 Alt键 .shift 2.1.0以上 Shift键 .meta 2.1.0以上 meta键 编程要求 根据提示,在右侧编辑器中的 Begin-End 区间补充代码,完成 v-on 指令的操作,实现简易版问卷调查。具体要求如下: 1、点击单选按钮‘女’后调用 handleSelectRadio 方法。 2、点击下拉选择框后调用 handleSelect 方法。 3、在输入框中按下 enter 键之后调用 handleInput 方法。 4、点击‘提交’按钮之后调用 handleSubmit 方法且不提交表单。 5、点击协议勾选框后调用 handleOk 方法。 提示 第3和第4使用修饰符。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on事件绑定</title> </head> <body> <!----------- Begin ------------> <div id="app"> <span>性别</span> <input id="girl" type="radio" name="性别" value="女"> <label for="girl">女</label> <input id="boy" type="radio" name="性别" value="男"> <label for="boy">男</label> <br> <span>选择爱吃的水果</span> <select id="fruits"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="榴莲">榴莲</option> </select> <br> <input type="text" id="advice" ref="pros" placeholder="请输入改进意见"> <form id="form"> <input id="ok" type="checkbox"/>我已认真填写,并确保真实 <br> <button :disabled="isDisabled">提交</button> </form> </div> <!------------ End -------------> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { isDisabled: true }, methods: { handleSelectRadio (event) { console.log(event.target.value) }, handleSelect (event) { console.log(index,event.target.value) }, handleInput () { console.log('聚焦') }, handleSubmit () { console.log('提交') }, handleOk (event) { if (event.target.checked === true) { this.isDisabled = false } else { this.isDisabled = true } return 'isDisabled' } } }) </script> </body> </html>
最新发布
12-23
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值