iT邦幫忙

0

(隱藏標籤內容顯示)PHP變數值傳給JS處理 製作點擊複製網址按鈕

各位大大好,因為想隱藏標籤內容,有嘗試加style="display:none"or"visibility:hidden",但會導致值傳不了,想知道有沒有其他辦法能讓隱藏標籤內容,或是其他函式能不用顯示標籤內容就能存取,謝謝

<?php
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>
<html lang="zh-TW" dir="ltr">
<textarea  cols="20" rows="10" id="site"><?php echo $url ?></textarea> //加這
<script type="text/javascript">
function copyFn(){
    var val=document.getElementById("site");
    val.select(); //選擇物件
    document.execCommand ("copy"); //執行複製命令
}
</script>
<input type="button" class="btn btn-success" value="複製文章網址" onclick="copyFn()">
</html>
1
海綿寶寶
iT邦大神 1 級 ‧ 2019-12-11 08:54:01
最佳解答

Google 網路上有幾種做法

選這個是比較新的文章,2019/10的
30秒就會的javascript

做法是把 url 那個 element 「藏」起來(=>搬到天高皇帝遠的地方)
要複製之前,先「選取」他、複製
然後再還原

選我最佳解答

看更多先前的回應...收起先前的回應...
fillano iT邦超人 1 級 ‧ 2019-12-11 09:03:23 檢舉

不知道用途,搞不好改用<input type="hidden" />也可以。

說不定也可以

只是我目前 Google 到的都是「focus then copy」的做法
我不知道為什麼沒有人用 input type=hidden 的做法
反正也不關我的事
/images/emoticon/emoticon56.gif

連 GitHub 都不 hide 了
真想不懂有什麼原因要這麼做
https://ithelp.ithome.com.tw/upload/images/20191211/20001787U0wH1SXYzH.png

好像是js的限制吧。要用那個copy命令,是需要可視元件的。
所以真不想給人家看時,常用的方式的確是將它搬到視窗外。(眼不見為淨)
實際情況也不太清楚。

不過,我倒不確定用input元件可不可以,因為之前都是跟網路學的,直接用textarea元件。等等來試試用input元件看看行不行。

單純覺得很醜,但又想不到好方法解決,謝謝大大,還真是沒想過能移到網站外面Σ(゚Д゚)

3
小魚
iT邦大師 1 級 ‧ 2019-12-11 08:19:15
看更多先前的回應...收起先前的回應...

老師!!請問中文課程哪裡報名!! (舉手

小魚 iT邦大師 1 級 ‧ 2019-12-11 09:11:41 檢舉

阿展展展
你先預繳訂金20萬,
我就告訴你哪裡報名.

https://ithelp.ithome.com.tw/upload/images/20191211/201195463V6po9QTU1.jpg
請笑納 /images/emoticon/emoticon41.gif

小魚 iT邦大師 1 級 ‧ 2019-12-11 09:34:17 檢舉

OK,
門口左轉,
往前直走100公尺,
那邊有條河你可以直接跳下去,
就會有人教你了.

/images/emoticon/emoticon26.gif

小弟會好好的拜讀,謝謝您╭( ・ㅂ・)9

1
咖咖拉
iT邦研究生 5 級 ‧ 2019-12-11 09:37:00

用CSS試試

#site{
    width: 0px;
    height: 0px;
    opacity: 0;
    position: absolute;
    z-index: -99;
}

加這段就不會影響使用者了

有測試過,應該是因為我沒放背景圖的原因,所以還是看得到,但確實也是個好辦法,謝謝大大讓我學到新方法(・ω・)b

其實

width: 0px;
height: 0px;
opacity: 0;

在某些元件是會沒作用,還是會看的到的。
一般還是移到視窗外最好。

咖咖拉 iT邦研究生 5 級 ‧ 2019-12-11 14:38:09 檢舉
width: 0px;
height: 0px;

我再測試時 寬高無法完全隱藏
因為偷懶所以直接寫 比較萬用

opacity: 0;
position: absolute;
z-index: -99;

真正的比較好的寫法
針對各元件原本的CSS來修正
但是...下面的方法複製又失效了XD
https://codepen.io/ipphof/pen/XWJdeYE

我要發表回答

立即登入回答