رفتن به مطلب

گذاشتن سورس کد در وبسایت


ارسال های توصیه شده

سلام

من میخوام ی سورس کد html رو توی ی فایل html بزارم به طوریکه سورس کدی که میزارم اجرا نشه 

بعد ی دکمه هم زیر باشه که وقتی کاربر میزنه روش سورس کد ها به حافظه موقتش کپی بشه 

لینک به دیدگاه
در ۱۳ دقیقه قبل، engmehrdad گفته است :

سلام

من میخوام ی سورس کد html رو توی ی فایل html بزارم به طوریکه سورس کدی که میزارم اجرا نشه 

بعد ی دکمه هم زیر باشه که وقتی کاربر میزنه روش سورس کد ها به حافظه موقتش کپی بشه 

از تگ توضیحات شاید بشه استفاده کنی .

لینک به دیدگاه
در ۴ دقیقه قبل، Rose۶ گفته است :

از تگ توضیحات شاید بشه استفاده کنی .

اگه منظورت اینکه <-- --> از این ها استفاده کنم که اصلا امکان پذیر نیست مگه خونده میشه اصلا ؟

مثلا بعضی از وبسایت های پخش موسیقی رو شاید دیده باشید که آخرش نوشته "کد پخش در وبلاگه شما " میخوام ی چنین چیزی باشه 

لینک به دیدگاه
در ۱۵ ساعت قبل، engmehrdad گفته است :

حالا اون هیچی چطور ی دکمه با جاوا اسکریپت بنویسم که همون سورس کد رو توی کلیپبورد کاربر کپی کنه؟

 

امیدوارم درست متوجه منظورتون شده باشم. اینکه یه دکمه ای تو سایت باشه، با زدن اون دکمه، یه متنی، لینکی، کدی یا هرچیزی که مدنظرتون هست کپی بشه. کدهای زیاد و مختلفی هست که حالا عملکرد و ظاهر متفاوتی دارن و به صورت آماده هم تو نت زیاده.

اما فکر کنم ساده ترین حالتش این باشه:

کد html واسه گذاشتن دکمه و کدی که قصد کپی کردنش رو دارین. "کپی لینک" متن دکمه هستش. مقدار value که آدرس سایت بهش داده شده، به جای آدرس سایت میتونید هر لینک یا متنی رو بذارید.

 <div class="row">
   <button class="btn">کپی لینک</button>
   <input type="text" name="" id="input" value="https://noandishaan.com" readonly />
</div>

کد CSS واسه ظاهر دکمه:

.row {
  width: 500px;
  margin: 20px auto;
  color: #414141;
}

.btn {
  padding: 10px 20px;
  border:0px;
  border-radius:5px;
  background-color:#007bff;
  color:#fff;
  cursor: pointer;
}
input {
  display:none;
}

اینم کد جاوا اسکریپت واسه کپی شدن اون لینک:

const input = document.querySelector('#input');
const btn = document.querySelector('button.btn');

btn.onclick= function(){
 input.select()
 document.execCommand('copy')
 alert('COPIED')
}

کدهای حرفه ای و زیباتر هم تو این زمینه وجود داره.

لینک به دیدگاه

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...