не стандартная форма поле ввода

мне нужно поле текстовой области со встроенной кнопкой, как на этой картинке:не стандартная форма поле ввода

__________________________________ 
|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

Как насчет автоматического добавления в разрыв строки с javascript, когда рядом с кнопкой? (и просто снизу снизу снизу справа) – atmd

Я полностью сосать на этом стороне клиента вещи, но это, кажется, возможно с 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

@Harry У этого есть тонкая ошибка. Но эй, это простой, не идеальный подход :) –

Да, я тоже видел это сейчас (позиционирование), но я думаю, что это, вероятно, самое близкое, что можно сделать. – Harry

@Harry: есть еще один: переход в режим редактирования и выполнение команды «cmd + a» (выбрать все) также выбирает кнопку. И если вы начнете печатать, вы уничтожите его. –

Это невозможно с текстовым полем. Но вы можете сделать это довольным div.

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

jsFiddle

источник

2015-02-06 10:51:57 arnolds

проверить скрипт – arnolds

и ни один из приведенных выше ответов, но они сохранены. – arnolds

@Harry Чтобы получить кнопку в правом нижнем углу и по-прежнему поддерживать функциональность, это невозможно. – arnolds

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

Текст идет под кнопкой :) –

Это не довольно, о чем вы просили, но, возможно, другой подход. Я позиционирую кнопку в нижней части div contenteditable и показываю вам только это, когда вы навешаете раздел любовника.

Как я уже сказал, это не «решение», а другой подход к решению проблемы.

.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

Зачем кому-то вводить скрытую кнопку «ОК»? :) –

@ ThePragmatick: Размещение нижней части в правом нижнем углу, в то время как все еще можно «видеть» за ней? Это также позволяет вам «выбрать все». – jbutler483

не стандартная форма поле ввода

ответ

Смежные вопросы