Làm cách nào để nhập kiểu văn bản khi nhập?

Question

Mỗi lần tôi gõ một nhân vật trong một lĩnh vực đầu vào, tôi phân tích sự biểu hiện vì vậy mà tôi nhận được:

1. Một mảng của thẻ, ví dụ, tokenArray = [2, *, COS, (, 4,)]
2. một mảng tương ứng của các loại thẻ, ví dụ, tokenType = [sỐ, ĐIỀU HÀNH, CHỨC NĂNG, (, sỐ,)]

tôi cần phải phong cách mỗi thẻ (ví dụ gán một màu sắc khác nhau cho mỗi token) dựa trên loại mã thông báo tương ứng.

tôi đã có thể dễ dàng phong cách một bản sao năng động của văn bản đầu vào trong một <div> (không phải là văn bản đầu vào riêng của mình, đó là những gì tôi yêu cầu để được giúp đỡ) khác nhau như sau:

JavaScript:

function processExpression() { 
    var userInput = document.getElementById('inputText').value; 

     var resultOutput = parse(userInput); //this generates the two arrays described above 

     for (i in tokenArray) 
      newHTML += "<span style='color: " + colorMap[ tokenType[i] ] + " '>" + tokenArray[i] + "</span>"; 

      document.getElementById('styledExpression').innerHTML = newHTML; 
} 

HTML:

<input type="text" id="inputText" value="" placeholder="Type expression" size="40" 
     onKeyDown="processExpression();" 
     onKeyUp="processExpression();"/> 

<div id="styledExpression" value=""></div> 

Làm thế nào tôi có thể tạo kiểu văn bản đầu vào trực tiếp trong lĩnh vực đầu vào nơi mà tôi gõ? Bất kỳ giải pháp JavaScript nào?

CẬP NHẬT

Câu trả lời của Tim cho câu hỏi replace innerHTML in contenteditable div cung cấp một số trợ giúp tốt.

Làm cách nào bạn sửa đổi http://jsfiddle.net/2rTA5/2/ để giải quyết khi nào ở mỗi lần nhấn phím, một lần có thể chỉnh sửa toàn bộ? Ví dụ: hãy tưởng tượng bạn nhập "= if (AND (3 = 2, A1: A4, OR (0,1)), 5,6)" và, ở mọi lần nhấn phím, nội dung có thể chỉnh sửa sẽ được viết lại theo chương trình (xem mô tả mã thông báo ở trên) và tôi mất con trỏ.

Làm cách nào để giải pháp này bỏ qua loại mã thông báo hoặc ký tự hoặc nút và chỉ cần lưu và khôi phục con trỏ tuyệt đối (từ đầu) vị trí trước khóa phím?

Answer 1

Nội dung nhập văn bản không hỗ trợ nội dung theo kiểu. Kết thúc câu chuyện.

Một giải pháp phổ biến là sử dụng contenteditable thay thế.

Answer 2

như Matt đã nói, <input> không hỗ trợ nội dung tạo kiểu. Tuy nhiên, một giải pháp có thể có thể là sử dụng một số <span> thứ hai sẽ chứa giá trị của đầu vào và hiển thị nội dung được tạo kiểu ở đây. Nếu điều đó không được chấp nhận, hãy sử dụng contenteditable như Matt đề xuất.

Answer 3

Bạn có thể phân loại kiểu dáng đằng sau nó nếu nó chỉ dành cho thẩm mỹ không quan trọng.

• Đặt nền và nội dung của <input> suốt
• Có khác <span> đằng sau nó
• Cập nhật nội dung của <span> (với phong cách thích hợp) khi nội dung của <input> thay đổi

Here's a quick demo.