未標異型輸入字段

我需要一個文本區域字段具有嵌入按鈕，像這樣的圖像上：未標異型輸入字段

__________________________________ 
|Lorep ipsum lorep ipsum lorep ipsu| 
|m lorep ipsum lorep ipsum lorep ip| 
|sum lorep ipsum lorep ip _________| 
|sum lorep ipsum lorep ip| OK | 
|________________________|_________|

文本應流周圍的按鈕，沒有下它被隱藏。

我能想象的唯一選擇是自定義SVG組件，其中包含文本和用戶操作處理程序，但這似乎有點矯枉過正。

任何有關此任務的簡單（可能不完美）方法的建議？

來源

2015-02-06 setec

如何僅顯示懸停在文本區域下部的按鈕？ – jbutler483 2015-02-06 10:46:46

如何在靠近按鈕時自動添加帶有javascript的換行符？（只有底部位於右下角） – atmd 2015-02-06 10:48:07

我完全吸在這個客戶端的東西，但它似乎有可能與contenteditable。

.input { 
 
    width: 300px; 
 
} 
 

 
.submit { 
 
    border: 1px solid black; 
 
    float: right; 
 
    text-align: center; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class='input' contenteditable=true> 
 
    <div type='button' class='submit' contenteditable=false>Save</div> 
 
    The text should flow around the button, without being hidden under it. 
 

 
The only option I could imagine is custom SVG component with text and user action handlers, but that seems to be a bit overkill. 
 

 
Any suggestion on simple (may be not perfect) approach for this task? 
 
    </div> 
 

 
</body> 
 
</html>

來源

2015-02-06 10:56:42

@哈利它有一個微妙的錯誤。但是，嘿，這是一個簡單的，不完美的方法:) – 2015-02-06 11:05:52

是的，我也看到了剛剛（定位），但我認爲這可能是最接近可以做到的。 – Harry 2015-02-06 11:07:08

@Harry：還有一個：進入編輯模式，並執行「cmd + a」（全選）也選擇按鈕。如果你開始打字，你會摧毀它。 – 2015-02-06 11:09:18

這是不可能與textarea。但你可以做到contenteditable div。

<div contenteditable="true"></div>

jsFiddle

來源

2015-02-06 10:51:57 arnolds

檢查小提琴 – arnolds 2015-02-06 10:58:23

既不是上述答案，但它們是upvoted。 – arnolds 2015-02-06 11:01:41

@Harry要將按鈕置於右下角並仍然保持功能是不可能的。 – arnolds 2015-02-06 11:07:46

HTML

<div> 
    <textarea name="" id="txt" cols="30" rows="10"></textarea> 
    <button>OK</button> 
</div>

CSS

div{ 
    display:inline-block; 
    position:relative; 
} 

button{ 
position:absolute; 
bottom:10px; 
right:10px; 
}

div{ 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
button{ 
 
position:absolute; 
 
bottom:10px; 
 
right:10px; 
 
}

<div> 
 
    <textarea name="" id="txt" cols="30" rows="10"></textarea> 
 
    <button>OK</button> 
 
</div>

來源

2015-02-06 10:58:12 Shin

文本在按鈕下:) – 2015-02-06 10:59:40

這不是相當於你要求什麼，但可能採取不同的方法。我將按鈕定位在contenteditable div的底部，並且只在您將情侶部分懸停時顯示。

正如我所說，這不是一個'解決方案'，更多的是一個問題的不同方法。

.wrap { 
 
    position: relative; 
 
} 
 
.text { 
 
    height: 200px; 
 
    width: 400px; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    overflow:auto; 
 
} 
 
.bot { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 20px; 
 
    width: 400px; 
 
    padding-bottom: 5%; 
 
} 
 
button { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100px; 
 
    right: 0; 
 
    transition: all 0.8s; 
 
    opacity: 0; 
 
} 
 
.bot:hover button { 
 
    opacity: 1; 
 
}

<div class="wrap"> 
 
    <div class="text" contenteditable="true"> 
 
    You can type in me! hover my lower section and you'll see the button! 
 
    </div> 
 
    <div class="bot"> 
 
    <button>OK</button> 
 
    </div> 
 
</div>

注意

這種 '解決方案' 可收拾的，因爲大多數CSS樣式是 '額外的比特'，像溢出和轉移。

來源

2015-02-06 11:04:46 jbutler483

爲什麼有人會放置一個隱藏的確定按鈕？ :) – 2015-02-06 14:13:32

@ThePragmatick：將底部放在右下角，同時仍然能夠「看到」它後面？它也可以讓你做'全選'。 – jbutler483 2015-02-06 14:16:54

未標異型輸入字段

回答

相關問題