คำถามติดแท็ก contenteditable

ฉันต้องการที่จะเรียกใช้ฟังก์ชั่นเมื่อผู้ใช้แก้ไขเนื้อหาที่divมีcontenteditableแอตทริบิวต์ onchangeเหตุการณ์เท่ากับอะไร ฉันใช้ jQuery ดังนั้นจึงควรเลือกใช้โซลูชันใด ๆ ที่ใช้ jQuery ขอบคุณ!

359 javascript  jquery  html  contenteditable 

ฉันมี HTML ง่ายๆนี้เป็นตัวอย่าง: <div id="editable" contenteditable="true"> text text text<br> text text text<br> text text text<br> </div> <button id="button">focus</button> ฉันต้องการสิ่งที่ง่าย - เมื่อฉันคลิกปุ่มฉันต้องการวางคาเร็ต (เคอร์เซอร์) ไว้ในตำแหน่งเฉพาะใน div ที่แก้ไขได้ จากการค้นหาบนเว็บฉันได้แนบไฟล์ JS ให้กับการคลิกปุ่ม แต่ไม่ได้ผล (FF, Chrome): var range = document.createRange(); var myDiv = document.getElementById("editable"); range.setStart(myDiv, 5); range.setEnd(myDiv, 5); เป็นไปได้ไหมที่จะตั้งคาเร็ตด้วยตนเองเช่นนี้?

191 javascript  jquery  contenteditable  caret  cursor-position 

ฉันอยู่หลังโซลูชันข้ามเบราว์เซอร์ที่ชัดเจนเพื่อตั้งค่าตำแหน่งเคอร์เซอร์ / คาเร็ตเป็นตำแหน่งที่รู้จักล่าสุดเมื่อ contentEditable = 'on' <div> ฟื้นโฟกัส ดูเหมือนว่าฟังก์ชั่นเริ่มต้นของ div เนื้อหาที่แก้ไขได้คือการย้ายเครื่องหมายรูปหมวก / เคอร์เซอร์ไปที่จุดเริ่มต้นของข้อความใน div แต่ละครั้งที่คุณคลิกที่มันซึ่งไม่พึงประสงค์ ฉันเชื่อว่าฉันจะต้องเก็บไว้ในตัวแปรตำแหน่งเคอร์เซอร์ปัจจุบันเมื่อพวกเขาออกจากโฟกัสของ div แล้วตั้งค่าใหม่เมื่อพวกเขามีโฟกัสภายในอีกครั้ง แต่ฉันไม่สามารถรวบรวมกันหรือหางาน ตัวอย่างรหัสเลย หากใครมีความคิดใด ๆ ตัวอย่างโค้ดหรือตัวอย่างการทำงานฉันยินดีที่จะเห็นพวกเขา ฉันยังไม่มีรหัสจริงๆ แต่นี่คือสิ่งที่ฉันมี: <script type="text/javascript"> // jQuery $(document).ready(function() { $('#area').focus(function() { .. } // focus I would imagine I need. } </script> <div id="area" contentEditable="true"></div> PS ฉันได้ลองใช้ทรัพยากรนี้แล้ว แต่ดูเหมือนว่ามันไม่ได้ผลสำหรับ …

142 javascript  jquery  html  contenteditable  cursor-position 

ฉันมีcontenteditableองค์ประกอบและเมื่อใดก็ตามที่ฉันพิมพ์บางสิ่งและกดENTERมันจะสร้างใหม่<div>และวางข้อความบรรทัดใหม่ไว้ที่นั่น ฉันไม่ชอบอันนี้เลยสักนิด เป็นไปได้หรือไม่ที่จะป้องกันไม่ให้สิ่งนี้เกิดขึ้นหรืออย่างน้อยก็แทนที่ด้วย a <br>? นี่คือการสาธิตhttp://jsfiddle.net/jDvau/ หมายเหตุ: นี่ไม่ใช่ปัญหาใน firefox

131 javascript  jquery  google-chrome  html  contenteditable 

ฉันจะฟังเหตุการณ์การเปลี่ยนแปลงสำหรับcontentEditable- ตามการควบคุมได้อย่างไร var Number = React.createClass({ render: function() { return <div> <span contentEditable={true} onChange={this.onChange}> {this.state.value} </span> = {this.state.value} </div>; }, onChange: function(v) { // Doesn't fire :( console.log('changed', v); }, getInitialState: function() { return {value: '123'} } }); React.renderComponent(<Number />, document.body); http://jsfiddle.net/NV/kb3gN/1621/

120 javascript  dom  contenteditable  reactjs 

ฉันพบว่าครอสเบราว์เซอร์ที่ดีจำนวนมากปฏิเสธวิธีตั้งค่าตำแหน่งเคอร์เซอร์หรือดัชนีคาเร็ตในcontentEditableองค์ประกอบ แต่ไม่มีวิธีรับหรือหาดัชนี ... สิ่งที่ฉันต้องการจะทำคือการรู้ว่าดัชนีของลูกศรภายใน div keyupนี้บน ดังนั้นเมื่อผู้ใช้พิมพ์ข้อความฉันสามารถรู้ดัชนีเคอร์เซอร์ภายในcontentEditableองค์ประกอบได้ทุกเมื่อ แก้ไข: ฉันกำลังมองหาINDEXภายในเนื้อหา div (ข้อความ) ไม่ใช่พิกัดเคอร์เซอร์ <div id="contentBox" contentEditable="true"></div> $('#contentbox').keyup(function() { // ... ? });

119 javascript  contenteditable  caret  cursor-position 

ใน JavaScript คุณสามารถเลือกข้อความในองค์ประกอบinputหรือtextareaองค์ประกอบโดยทางโปรแกรมได้ คุณสามารถมุ่งเน้นการป้อนข้อมูลที่มีและจากนั้นเลือกเนื้อหาของมันด้วยipt.focus() คุณยังสามารถเลือกช่วงที่เฉพาะเจาะจงกับipt.select()ipt.setSelectionRange(from,to) คำถามของฉันคือมีวิธีใดบ้างที่จะทำสิ่งนี้ในcontenteditableองค์ประกอบด้วย ฉันพบว่าฉันสามารถทำได้elem.focus()เพื่อใส่คาเร็ตในcontenteditableองค์ประกอบ แต่การรันในภายหลังelem.select()ไม่ได้ผล (และไม่ทำsetSelectionRange) ฉันไม่พบสิ่งใดในเว็บเกี่ยวกับเรื่องนี้ แต่บางทีฉันกำลังค้นหาสิ่งที่ผิด ... อย่างไรก็ตามถ้ามันสร้างความแตกต่างฉันต้องการให้มันทำงานใน Google Chrome เท่านั้นเพราะนี่คือส่วนขยายของ Chrome

119 javascript  selection  contenteditable 

เอาต์พุตในChrome : <div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;"> hey <div>what's up?</div> <div> <button id="insert_caret"></button> ฉันเชื่อในFFมันจะมีลักษณะดังนี้: hey <br /> what's up? และในIE : hey <p>what's up?</p> น่าเสียดายที่ไม่มีวิธีที่ดีในการสร้างมันขึ้นมาเพื่อให้ทุกเบราว์เซอร์แทรก<br />แท็กแทน div หรือ p หรืออย่างน้อยฉันก็ไม่พบสิ่งใดทางออนไลน์ อย่างไรก็ตามสิ่งที่ฉันพยายามทำในตอนนี้คือเมื่อฉันกดปุ่มฉันต้องการให้ตั้งเครื่องหมายคาเร็ตไว้ที่ท้ายข้อความดังนั้นควรมีลักษณะดังนี้: hey what's up?| วิธีการทำเช่นนี้จึงทำงานในเบราว์เซอร์ทั้งหมด ? ตัวอย่าง: $(document).ready(function() { $('#insert_caret').click(function() { var ele = $('#content'); var length = ele.html().length; …

111 javascript  html  cross-browser  contenteditable  caret 

เมื่อฉันตั้งค่าองค์ประกอบก่อนเป็นเนื้อหาที่สามารถแก้ไขได้และให้โฟกัสในการแก้ไขมันจะได้รับเส้นประรอบ ๆ องค์ประกอบที่ดูไม่ดี ไม่มีเส้นขอบเมื่อโฟกัสอยู่ที่อื่น ฉันจะลบเส้นขอบนั้นได้อย่างไร ขอบคุณ

98 javascript  jquery  contenteditable