Textarea hoạt động như thế nào html?

Ôi,

$['textarea']
  .focus[function[] { $[this].css["background", "none"] }]
  .blur[function[] { if [$[this][0].value == ''] { $[this].css["background", "url[images/benice.png] center center no-repeat"] } }];

1. Bạn sở hữu bao nhiêu điều kỳ quặc. Đây là tập hợp chín điều bạn có thể muốn làm liên quan đến textareas. Vui thích

1. Hình ảnh làm nền vùng văn bản, biến mất khi nhập văn bản

Bạn có thể thêm hình nền vào vùng văn bản giống như bất kỳ phần tử nào khác. Trong trường hợp này, hình ảnh là một lời nhắc nhở thân thiện để trở nên tốt đẹp =]. Nếu bạn thêm một hình nền, vì bất kỳ lý do gì, nó có thể phá vỡ kiểu dáng mặc định của trình duyệt đối với vùng văn bản. Chữ đậm nét 1px mặc định được thay thế bằng đường viền vát dày hơn. Để khôi phục mặc định của trình duyệt, bạn chỉ cần buộc đường viền trở lại bình thường

textarea {
  background: url[images/benice.png] center center no-repeat; /* This ruins default border */
  border: 1px solid #888; 
}

Hình nền đó có thể cản trở khả năng đọc của văn bản khi văn bản đạt đến mức đó. Đây là một số jQuery sẽ xóa nền khi vùng văn bản được lấy nét và đặt nó trở lại nếu vùng văn bản không có bất kỳ văn bản nào bên trong

$['textarea']
  .focus[function[] { $[this].css["background", "none"] }]
  .blur[function[] { if [$[this][0].value == ''] { $[this].css["background", "url[images/benice.png] center center no-repeat"] } }];

2. Văn bản giữ chỗ HTML5

Có một thuộc tính mới như một phần của biểu mẫu HTML5 được gọi là trình giữ chỗ. Nó hiển thị văn bản màu xám mờ trong vùng văn bản [cũng hoạt động đối với kiểu nhập văn bản] sẽ biến mất khi vùng văn bản được lấy nét hoặc có bất kỳ giá trị nào

Văn bản giữ chỗ HTML5 hoạt động trong Safari 5, Mobile Safari, Chrome 6 và Firefox 4 alpha

3. Văn bản giữ chỗ, HTML5 với dự phòng jQuery

Chúng ta có thể dễ dàng kiểm tra xem một phần tử cụ thể có hỗ trợ một thuộc tính cụ thể hay không bằng cách kiểm tra bằng JavaScript

function elementSupportsAttribute[element, attribute] {
  var test = document.createElement[element];
  if [attribute in test] {
    return true;
  } else {
    return false;
  }
};

Sau đó, chúng tôi có thể viết mã để nếu trình duyệt hỗ trợ thuộc tính trình giữ chỗ, chúng tôi sẽ sử dụng thuộc tính đó, nếu không, chúng tôi sẽ bắt chước hành vi với jQuery

if [!elementSupportsAttribute['textarea', 'placeholder']] {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $["#example-three"]
    .data["originalText", $["#example-three"].text[]]
    .css["color", "#999"]
    .focus[function[] {
        var $el = $[this];
        if [this.value == $el.data["originalText"]] {
          this.value = "";
        }
    }]
    .blur[function[] {
      if [this.value == ""] {
          this.value = $[this].data["originalText"];
      }
    }];
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $["#example-three"]
    .attr["placeholder", $["#example-three"].text[]]
    .text[""];
}

4. Loại bỏ ánh sáng xanh

Tất cả các trình duyệt WebKit, Firefox 3. 6 và Opera 10 đều đặt đường viền màu xanh phát sáng xung quanh vùng văn bản khi chúng được lấy nét. Bạn có thể xóa nó khỏi trình duyệt WebKit như thế này

textarea {
  outline: none;
}

Bạn có thể áp dụng nó vào. kiểu tập trung cũng vậy, nhưng nó hoạt động theo cả hai cách. Tôi vẫn chưa tìm ra cách xóa nó khỏi Firefox hoặc Opera, nhưng -moz-outline-style gần như tôi đã thử nghiệm

LỜI NHẮC NHỞ. Ánh sáng xanh đang trở thành một tiêu chuẩn mạnh mẽ và việc phá vỡ tiêu chuẩn đó thường là một điều tồi tệ đối với người dùng của bạn. Nếu bạn làm điều đó, bạn nên có một lý do thuyết phục cũng như một lý do mạnh mẽ tương tự. phong cách tập trung

5. Xóa núm điều khiển thay đổi kích thước

Các trình duyệt WebKit đã đính kèm một phần tử giao diện người dùng nhỏ ở dưới cùng bên phải của vùng văn bản mà người dùng có thể sử dụng để nhấp và kéo để thay đổi kích thước vùng văn bản. Nếu vì bất kỳ lý do gì bạn muốn xóa nó, CSS là tất cả những gì bạn cần

textarea {
  resize: none;
}

6. Thêm xử lý thay đổi kích thước

Giao diện người dùng jQuery có tương tác có thể thay đổi kích thước có thể được sử dụng trên vùng văn bản. Nó hoạt động trong tất cả các trình duyệt và ghi đè phiên bản gốc của WebKit, vì phiên bản này có tất cả các loại nội dung ưa thích [như gọi lại và hoạt ảnh]

Để sử dụng nó, hãy tải giao diện người dùng jQuery và jQuery trên trang của bạn và ở mức cơ bản nhất, bạn gọi nó như thế này

________số 8

7. Tự động thay đổi kích thước để phù hợp với nội dung

James Padolsey có một tập lệnh jQuery siêu đẹp để tự động thay đổi kích thước vùng văn bản [Điều đó đã biến mất và trên internet, vì vậy đây là bản sao lưu. ]

Đây là một tác phẩm khác của Louis Lazeris, cũng bao gồm các liên kết đến các tùy chọn khác. Nó hoạt động như cách bạn có thể hy vọng nó hoạt động. Vùng văn bản bắt đầu có kích thước hợp lý bình thường. Khi bạn nhập ngày càng nhiều nội dung, vùng văn bản sẽ mở rộng để bao gồm tất cả văn bản đó, thay vì kích hoạt thanh cuộn như mặc định

Plugin có nhiều tùy chọn, nhưng đơn giản nhất, bạn chỉ cần tải jQuery, tệp plugin và gọi nó như thế này

$['textarea'].autoResize[];

Một mẹo khác ở đây là không sử dụng

$['textarea']
  .focus[function[] { $[this].css["background", "none"] }]
  .blur[function[] { if [$[this][0].value == ''] { $[this].css["background", "url[images/benice.png] center center no-repeat"] } }];

1, mà sử dụng

$['textarea']
  .focus[function[] { $[this].css["background", "none"] }]
  .blur[function[] { if [$[this][0].value == ''] { $[this].css["background", "url[images/benice.png] center center no-repeat"] } }];

3. Điều đó sẽ tự động phát triển mà không cần sự trợ giúp của JavaScript ưa thích nào cả – ngoại trừ việc nó không còn là một phần tử biểu mẫu thực nữa, vì vậy bạn sẽ cần JavaScript để trích xuất/gửi giá trị

8. Bây giờ

Để ngăn văn bản ngắt dòng bình thường trong CSS, bạn sử dụng #whatever { khoảng trắng. cái bọc; . Nhưng vì bất kỳ lý do gì, điều đó không hoạt động với textareas. Nếu bạn muốn có thể nhập vào vùng văn bản và muốn các dòng không bị ngắt cho đến khi bạn nhấn return/enter [thay vào đó, một thanh cuộn ngang được kích hoạt], bạn sẽ phải sử dụng thuộc tính wrap="off"

textarea {
  background: url[images/benice.png] center center no-repeat; /* This ruins default border */
  border: 1px solid #888; 
}

2

9. Xóa thanh cuộn mặc định trong Internet Explorer

IE đặt một thanh cuộn dọc theo mặc định trên tất cả các vùng văn bản. Bạn có thể ẩn nó với tràn. bị ẩn, nhưng sau đó bạn không nhận được bất kỳ thanh cuộn nào khi bạn mở rộng. Rất may, tự động tràn hoạt động để loại bỏ thanh cuộn nhưng vẫn đặt chúng trở lại khi cần thiết

Làm cách nào để lấy văn bản từ vùng văn bản trong HTML?

Textarea có hoạt động giống như đầu vào không?

Sự khác biệt giữa trường văn bản và vùng văn bản trong HTML là gì?

Tôi có thể sử dụng textarea làm HTML đầu vào không?