<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif; margin-top: 30px;"> <div class="row"> <h2 class="text-center">Form Girişi</h2> <h4 class="text-center" id="sonuc">Bilgilendirme</h4> <hr style="width:50%"> <div class="form-group row"> <div class="col-xs-10"> <input type="text" class="form-control input-lg" id="webUrl" placeholder="validate web url."> </div> <div class="col-xs-2"> <button class="btn btn-info btn-lg btn-block" id="pasteBtn2"> <span class="glyphicon glyphicon-paste"></span> Yapıştır</button> </div> </div> <div class="form-group row"> <div class="col-xs-10"> <input type="text" class="form-control input-lg" id="resimUrl" placeholder="img web url."> </div> <div class="col-xs-2"> <button class="btn btn-info btn-lg btn-block" id="pasteBtn1"> <span class="glyphicon glyphicon-paste"></span> Yapıştır</button> </div> </div> <div class="label label-default" style="font-size:15px" id="alert-message">Geçerli bir resim Url si giriniz.</div> <img id="img-area" class="thumbnail" style="margin-top:20px;width:250px" alt="Resim Önizleme Alanı" src="https://picsum.photos/1000/750?18" /> <div class="well">footer</div> </div><!-- row --> </div>

$(document).ready(function(){ const defaultImg = "https://picsum.photos/1000/750?18"; // URL'yi kontrol edip önizleme yapar function previewImage(url) { if (!url.startsWith('http://') && !url.startsWith('https://')) { $('#alert-message').removeClass().addClass('label label-danger').text('Lütfen geçerli bir URL (http/https) girin.'); $('#img-area').attr('src', defaultImg); $('#sonuc').text('Geçersiz URL Formatı'); return; } // Durum mesajı $('#alert-message').removeClass().addClass('label label-default').text('Resim yükleniyor...'); // Yeni <img> oluştur (önbellek hatalarını önlemek için) const img = new Image(); img.onload = function() { $('#img-area').attr('src', url); $('#alert-message').removeClass().addClass('label label-success').text('Resim başarıyla yüklendi.'); $('#sonuc').text('Önizlenen URL: ' + url); }; img.onerror = function() { $('#alert-message').removeClass().addClass('label label-danger').text('HATA: Resim yüklenemedi veya URL hatalı.'); $('#img-area').attr('src', defaultImg); $('#sonuc').text('URL Hatalı'); }; // Resim yükleme başlat img.src = url; } // Genel Web URL'sini kontrol eder (Site adresi, HTML sayfası vb.) function validateWebUrl(url) { // En basit ve yaygın kontrol: http/https ile başlıyor ve boş değil. const isValid = url.startsWith('http://') || url.startsWith('https://'); if (isValid) { $('#alert-message').removeClass().addClass('label label-danger').text('Web URL\'si geçerli formatta: ' + url); return true; } else { $('#alert-message').removeClass().addClass('label label-success').text('Web URL\'si formatı geçersiz! (http/https ile başlamalı)'); return false; } } // INPUT değiştiğinde $('#resimUrl').on('input change', function() { const url = $(this).val().trim(); if (url) { previewImage(url); } else { $('#alert-message').removeClass().addClass('label label-default').text('URL\'yi girin ve resmi aşağıda önizleyin.'); $('#img-area').attr('src', defaultImg); $('#sonuc').text('URL Yapıştırın veya Yazın'); } }); // 3. Web URL'si Input Olayı (YENİ) $('#webUrl').on('input change', function() { const url = $(this).val().trim(); if (url) { validateWebUrl(url); } else { $('#alert-message').removeClass().addClass('label label-default').text('Web URL\'sini girin.'); } }); // 4. Web URL'si Yapıştır Butonu (YENİ) // Web URL'si (pasteBtn2) Yapıştırıcı (İSTENEN DÜZELTME) $('#pasteBtn2').click(function() { const targetInput = $('#webUrl'); if (navigator.clipboard && navigator.clipboard.readText) { navigator.clipboard.readText().then(text => { const temizUrl = text.trim(); targetInput.val(temizUrl); validateWebUrl(temizUrl); // Sadece doğrulama }).catch(err => { // Hata durumunda prompt ile yedekleme console.warn('Clipboard API (Web) başarısız:', err); const manuel = prompt("Panodan okuma başarısız. Lütfen Web URL'sini buraya yapıştırın:"); if (manuel) { targetInput.val(manuel.trim()); validateWebUrl(manuel.trim()); } else { $('#alert-message').removeClass().addClass('label label-danger').text('Yapıştırma iptal edildi.'); } }); } else { // Tarayıcı desteklemiyorsa prompt ile yedekleme const manuel = prompt("Tarayıcı desteklemiyor. Lütfen Web URL'sini buraya yapıştırın:"); if (manuel) { targetInput.val(manuel.trim()); validateWebUrl(manuel.trim()); } else { $('#alert-message').removeClass().addClass('label label-danger').text('Yapıştırma iptal edildi.'); } } }); //https://picsum.photos/1000/750?18 // YAPIŞTIR butonu $('#pasteBtn1').click(function() { if (navigator.clipboard && navigator.clipboard.readText) { navigator.clipboard.readText().then(text => { const temizUrl = text.trim(); $('#resimUrl').val(temizUrl); previewImage(temizUrl); }).catch(err => { console.warn('Clipboard API başarısız:', err); const manuel = prompt("Panodan okuma başarısız. Lütfen URL'yi buraya yapıştırın:"); if (manuel) { $('#resimUrl').val(manuel.trim()); previewImage(manuel.trim()); } else { $('#alert-message').removeClass().addClass('label label-danger').text('Yapıştırma iptal edildi.'); } }); } else { const manuel = prompt("Tarayıcı desteklemiyor. Lütfen URL'yi buraya yapıştırın:"); if (manuel) { $('#resimUrl').val(manuel.trim()); previewImage(manuel.trim()); } } }); });