Làm cách nào để tạo DIV có thể chỉnh sửa giống như trường văn bản?

Question

Tôi có một số DIV có contentEditable=true để người dùng có thể chỉnh sửa. Vấn đề là nó không giống như một trường văn bản, vì vậy nó có thể không được rõ ràng cho người dùng rằng nó có thể được chỉnh sửa.

Có cách nào để tôi có thể tạo kiểu DIV sao cho nó xuất hiện cho người dùng như trường nhập văn bản?

Answer 1

Những trông giống như họ các đối tác thực sự trong Safari, Chrome và Firefox. Họ làm suy giảm duyên dáng và nhìn OK trong Opera và IE9, quá.

Demo: http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS:

textarea { 
    height: 28px; 
    width: 400px; 
} 

#textarea { 
    -moz-appearance: textfield-multiline; 
    -webkit-appearance: textarea; 
    border: 1px solid gray; 
    font: medium -moz-fixed; 
    font: -webkit-small-control; 
    height: 28px; 
    overflow: auto; 
    padding: 2px; 
    resize: both; 
    width: 400px; 
} 

input { 
    margin-top: 5px; 
    width: 400px; 
} 

#input { 
    -moz-appearance: textfield; 
    -webkit-appearance: textfield; 
    background-color: white; 
    background-color: -moz-field; 
    border: 1px solid darkgray; 
    box-shadow: 1px 1px 1px 0 lightgray inset; 
    font: -moz-field; 
    font: -webkit-small-control; 
    margin-top: 5px; 
    padding: 2px 3px; 
    width: 398px;  
} 

HTML:

<textarea>I am a textarea</textarea> 
<div id="textarea" contenteditable>I look like textarea</div> 

<input value="I am an input" /> 
<div id="input" contenteditable>I look like an input</div> 

Output:

Answer 2

Bạn có thể đặt TEXTAREA có kích thước tương tự dưới DIV của bạn, vì vậy khung điều khiển tiêu chuẩn sẽ hiển thị xung quanh div.

Có thể tốt để đặt tính năng này bị vô hiệu hóa, để ngăn chặn việc lấy cắp trọng tâm ngẫu nhiên.

Answer 3

Trong WebKit, bạn có thể làm: -webkit-appearance: textarea;

Answer 4

Bạn có thể đi cho một hộp inner shadow:

div[contenteditable=true] { 
    box-shadow: inset 0px 1px 4px #666; 
} 

tôi cập nhật các jsfiddle từ Jarish: http://jsfiddle.net/ZevvE/2/

Answer 5

tôi sẽ đề nghị điều này cho phù hợp với phong cách của Chrome, được mở rộng từ ví dụ của Jarish. Lưu ý thuộc tính con trỏ mà các câu trả lời trước đã bỏ qua.

cursor: text; 
border: 1px solid #ccc; 
font: medium -moz-fixed; 
font: -webkit-small-control; 
height: 200px; 
overflow: auto; 
padding: 2px; 
resize: both; 
-moz-box-shadow: inset 0px 1px 2px #ccc; 
-webkit-box-shadow: inset 0px 1px 2px #ccc; 
box-shadow: inset 0px 1px 2px #ccc; 

Answer 6

Vấn đề với tất cả số này là họ không giải quyết nếu các dòng văn bản dài và rộng hơn nhiều mà div overflow: auto không làm quảng cáo một thanh cuộn làm việc đúng. Đây là giải pháp hoàn hảo mà tôi đã tìm thấy:

Tạo hai div. Một div bên trong đó là đủ rộng để xử lý các dòng rộng nhất của văn bản và sau đó một bên ngoài nhỏ hơn có tác dụng ở người giữ cho div bên trong:

<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;"> 
    <div style="width:800px;"> 

    now really long text like this can be put in the text area and it will really <br/> 
    look and act more like a real text area bla bla bla <br/> 

    </div> 
</div> 

Answer 7

Nếu bạn sử dụng bootstrap chỉ cần thêm form-control lớp. Ví dụ:

class="form-control"