溢出時使跨度像輸入字段一樣起作用

我在直接放置在輸入字段頂部的跨度中複製輸入字段值。（這樣做只能操作部分文本）溢出時使跨度像輸入字段一樣起作用

我遇到了溢出問題。

目前，如果我繼續輸入超過輸入字段的限制，跨度將無限擴展。

有沒有辦法讓跨度像輸入字段一樣行動並隨着越來越多的字符添加滾動文本到左側？

電流量程造型：

style="display: inline-block; position: absolute; top: 0.25px; left: 2px; padding: 1px; z-index: 2; pointer-events: none;"

編輯

<div style="position: relative;" class="input-box"> 
        <input style="color: transparent; caret-color: black; z-index: 1;" type="text" name="street[]" id="street_1" class="street 
        input-text"/> 

        <span id="street1span" class="input-text" style="display: inline-block; width: 100%; position: absolute; top: 0.25px; left: 2px; padding: 1px; z-index: 2; pointer-events: none;" ></span> 
       </div>

來源

2017-08-17 Jurģis Toms Liepiņš

試試這個：

span { 
 
    border: 1px solid #CCC; 
 
    width: 200px; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
input[type="text"] { 
 
    width: 200px; 
 
}

Span :<span contenteditable="true"></span> 
 
<br><br> 
 
Input:<input type="text" name="">

編輯您的帖子後：

span { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 2px; 
 
    padding: 1px; 
 
    z-index: 2; 
 
    border: 1px solid #CCC; 
 
    width: 200px; 
 
    height: 20px; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<div style="position: relative;" class="input-box"> 
 
    <input style="color: #000; caret-color: black; z-index: 1;" type="text" name="street[]" id="street_1" class="streetinput-text"/> 
 

 
<span id="street1span" contenteditable="true" class="input-text" > 
 
    </span> 
 
</div>

來源

2017-08-17 12:17:26 Ehsan

在他的情況下，如果沒有內容可編輯的，但用於演示目的，這是完美的解決方案。 – Doomenik

這是完美的，但在我的網站上，它不會很好地回滾，就像在這裏的代碼段中，文本在輸入字段的末尾消失 –

這可能是因爲我的跨度不是'contenteditable =「true」'？ –

，你可以在你的跨度添加overflow-x:auto;

來源

2017-08-17 12:13:38 veera

試試這個：

* { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 12px; 
 
} 
 
input { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0.25px; 
 
    left: 2px; 
 
    padding: 1px; 
 
    overflow-x:auto 
 
    }

<div class="row"> 
 
    <input type="text" placeholder="something span" /> 
 
</div>

來源

2017-08-17 12:20:47

這仍然只是一個輸入字段 – Doomenik

你可以做

HTML

<span id="flow"></span>

CSS

.flow{ 
    overflow : hidden/auto; // depending on your choice 
}

來源

2017-08-17 12:32:06

-2

試試這個：

<div style="position: relative;" class="input-box"> 
    <input style="color: transparent; caret-color: black; z-index: 1;" type="text" name="street[]" id="street_1" class="street 
     input-text"/> 
    <br /><br /><br /> 
    <hr /> 
    <span id="street1span" class="input-text" style="display: inline-block; width: 100%; padding: 1px; border:1px solid #ccc; width:300px; overflow-x:scroll;" > hellhellhellhellhellhellhellhellhellhellhellhellhellhello</span> 
</div>

來源

2017-08-17 13:03:34

任何解釋，你有什麼建議？ –

一個很好的答案應該包括文字說明你做了什麼以及你爲什麼做了，用戶做錯了什麼？ –

溢出時使跨度像輸入字段一樣起作用

回答

相關問題