Liên kết bên trong thẻ đầu vào

Question

Cách hiển thị a href và img src bên trong hộp nhập (hộp văn bản). ví dụ: tôi muốn hiển thị điều này bên trong một hộp văn bản (<input id=link)

<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a> 

cảm ơn trước.

Answer 1

Dựa trên các nhận xét, tôi cho rằng bạn muốn trường nhập có mã HTML đó làm văn bản mặc định. Bạn phải sử dụng mã tham chiếu ký tự cho dấu ngoặc kép và ít hơn/lớn hơn dấu.

<input type="text" value="&lt;a href=&quot;http://www.mysite.com/link&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://www.mysite.com/img.jpg&quot; border=&quot;0&quot; alt=&quot;mysite.com&quot;&gt;&lt;/a&gt;" /> 

(Bằng cách này, bạn đề cập đến "như trong Photobucket" - bạn chỉ có thể nhìn vào HTML của trang web để xem cách họ làm điều đó.)

Answer 2

Như chú thích đề cập, bạn không thể đặt liên kết vào hộp văn bản input theo nghĩa đen (mặc dù bạn có thể mô phỏng một hộp bằng JavaScript).

Đối với hình nền, hãy sử dụng CSS background-image.

Answer 3

Bạn có hai tùy chọn.

1. Đặt hình ảnh làm nền của đầu vào, nhưng điều này sẽ không thể nhấp được.
2. Vị trí tuyệt đối của phần tử trên đầu vào.

1:

.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; } 

2:

HTML

<div class="inputContainer"> 
    <input class="myInput" type="text" name="myInput" id="myInput" /> 
    <a href="#" class="inputImg"><img src="#" /></a> 
</div> 

CSS

.inputContainer { position:relative; } 
.myInput { padding-left:25px; /* This will move the text from under the image */ } 
.inputImg { left:5px; position:absolute; top:5px; z-index:5; } 

Bạn sẽ cần phải chơi với vị trí và valu es tùy thuộc vào kích thước đầu vào của bạn, kích thước hình ảnh và vị trí chung, nhưng điều đó sẽ làm những gì bạn muốn.