Ці можна зрабіць поле ўводу толькі для чытання з дапамогай CSS?

Я ведаю, што ўваходныя элементы выкананы толькі для чытання, ужываючы толькі для чытання лагічны атрыбут, і быць атрыбутам гэта не ўплывае на CSS.

З іншага боку, мой сцэнар, здаецца, вельмі добра падыходзіць для CSS, так што я спадзяваўся, што ёсць нейкі трук CSS, каб дазволіць мне зрабіць гэта. У мяне ёсць версія для друку гіперспасылкай на маёй форме. Пстрычка на ёй адлюстроўваецца ... версія для друку дакумента. Гэта ў асноўным CSS матэрыял, мой print.css выглядае наступным чынам:

html.print {
    width: 8.57in;
}

.print body {
    font: 9pt/1.5 Arial, sans-serif;
    margin: 0 1in;
    overflow: auto;
}

.print #header, .print #footer {
    display: none;
}

.print .content {
    background-color: white;
    overflow: auto;
}

.print .fieldset > div.legend:first-child {
    background: white;
}

.print ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}

.print :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}

.print ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}

.print :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}

.print .check-mark {
    display: inline;
}

.print input[type=checkbox] {
    display: none;
}

.print .boolean-false {
    display: none;
}

Ёсць таксама некалькі JavaScript частак, такіх як:

  • Даданне Друк клас для элемента HTML
  • Адлюстраванне табліц без палос пракруткі
  • Некалькі іншых дробных рэчаў, як утойванне якіх-небудзь усплывальныя накладак.

Мая бягучая праблема заключаецца ў поле ўводу. Яны павінны быць толькі для чытання, аднак, я паняцця не маю, як гэта зрабіць з мінімальнымі зменамі ў кодзе. CSS можа быць ідэальным рашэннем.

Любыя ідэі?

28
Я хачу, каб паказаць версію для друку да таго, як карыстальнік фактычна выбірае друк з меню браўзэра. <�Код> @media друк ўключаецца толькі ў дыялогавым акне папярэдняга прагляду друку браўзэра або калі на самай справе друк. Я хачу даць друкаваную версію, але на экране СМІ.
дададзена аўтар mark, крыніца
Не думаю, што гэта магчыма з дапамогай CSS. CSS для кладкі.
дададзена аўтар sroes, крыніца
На друкаванай версіі, вы не маглі б проста дадаць атрыбут у тэг HTML?
дададзена аўтар Pete, крыніца
Гэта не дае адказ на пытанне, але чаму б не выкарыстоўваць медыя-запыт тыпу @media друк для стварэння версіі для друку?
дададзена аўтар PLPeeters, крыніца

8 адказы

З дапамогай CSS толькі? Гэта свайго роду магчыма на ўводзе тэксту з дапамогай Карыстацкі абярыце: не :

.print {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;          
}

JSFiddle example.

Гэта варта адзначыць, што гэта не будзе працаваць у браўзэраў, якія не падтрымліваюць CSS3 або падтрымліваць user- выберыце ўласцівасць . <�Код> толькі для чытання ўласцівасць павінна быць у ідэале аддаецца ўваходных разметцы вы хочаце быць зроблены толькі для чытання, але гэта робіць працу як Hacky альтэрнатывы CSS.

З дапамогай JavaScript:

document.getElementById("myReadonlyInput").setAttribute("readonly", "true");

Edit: The CSS method no longer works in Chrome (29). The -webkit-user-select property now appears to be ignored on input elements.

29
дададзена
Дзіўны, гэта дастаткова добра для мяне.
дададзена аўтар mark, крыніца
Цікава, у Chrome ён паводзіць сябе, як і чакалася - пераходзіць ад старонкі.
дададзена аўтар mark, крыніца
Дарэчы, я падправіў jsFiddle трохі - jsfiddle.net/G9jNT/3
дададзена аўтар mark, крыніца
@Rohith гэта не здаецца, праблема ў Chrome. Як я ўжо казаў, хоць, у ідэале толькі для чытання ўласцівасць павінна быць нададзена элементу (альбо шляхам непасрэднага змены разметкі або JavaScript).
дададзена аўтар James Donnelly, крыніца
@CubicleSoft я рэдагаваў гэты адказ у верасні 2013 года, не кажучы пра тое, што CSS падыход больш не працуе ў Chrome. Я быў бы здзіўлены, калі ён усё яшчэ працуе ў Firefox амаль 4 гады на!
дададзена аўтар James Donnelly, крыніца
З светлячок 27, «карыстач-не абраць: няма» толькі замінае мне, каб выбраць тэкст у поле з дапамогай мышы, але не з спалучэнне клавіш (Shift + стрэлкі), што смешна, або змяняючы яго змест (сціранне, запіс). У адпаведнасці з Opera 12, поле абсалютна нармальна.
дададзена аўтар lolesque, крыніца
Fiddle пад Firefox даволі дзіўна - і можа быць памылка. Я магу націснуць на поле, але націснуўшы на кнопку «Выдаліць» перамяшчае курсор клавіятуры на адзін знак направа, а затым выдаляе сімвал пасля яго. Вынікам з'яўляецца тое, што кожны знак у тэкставым полі выдаляецца.
дададзена аўтар CubicleSoft, крыніца
Гэта дапамагло мне сёння ўвечары, дзякуй шмат.
дададзена аўтар ssaviers, крыніца
Я шукаў падобную рэч. І дзякуй за адказ. Але ёсць праблема, я выявіў у скрыпцы .. Калі мы засяроджваецца яго і націсніце кнопку Выдаліць тэкст вобласць становіцца выдаленая. Ці ёсць рашэнне для гэтага? Я выкарыстоўваю Mozilla Firefox
дададзена аўтар Rohith, крыніца

Спадзяюся, што гэта дапаможа.

    input[readonly="readonly"]
{
    background-color:blue;
}

спасылка:

http://jsfiddle.net/uzyH5/1/

10
дададзена
Прысвойваецца </толькі для чытання кода> ўласцівасць у HTML і спасылацца на яго з дапамогай CSS. OP шукае прызначыць толькі для чытання або падобныя паводзіны <�я>, выкарыстоўваючы CSS, калі інтэрпрэтаваць яго правільна.
дададзена аўтар ASGM, крыніца
Як гэта вырашыць праблему OP яшчэ?
дададзена аўтар ASGM, крыніца
Дзякуй. Гэта працавала выдатна для мяне.
дададзена аўтар davisec52, крыніца
Што вы кажаце? Ты з'ехаў з глузду?
дададзена аўтар RachithaS, крыніца

Гэта не з'яўляецца (з бягучымі браўзэрамі) можна зрабіць поле ўводу толькі для чытання з дапамогай CSS у адзіночку.

Хоць, як вы ўжо казалі, вы можаце ўжыць атрыбут толькі для чытання = «» толькі для чытання .

Калі ваш галоўны крытэр, каб не змяняць разметку ў крыніцы, ёсць спосабы, каб атрымаць гэта, ненадакучліва, з дапамогай JavaScript.

З JQuery, гэта лёгка:

 $('input').attr('readonly', 'readonly');

Ці нават з простым Javascript:

document.getElementById('someId').setAttribute('readonly', 'readonly');
8
дададзена
з запытам 1.9+, выкарыстоўвайце $ ( '<�ўваход>') Прапілоўка ( 'readyonly', праўда) ;.
дададзена аўтар NuclearPeon, крыніца
пара памылак друку, з запытам 1.9+ ён павінен быць $ ( "уваход") Прапілоўка ( «толькі для чытання», праўда) ;.
дададзена аўтар Fabio C., крыніца

Не зусім тое, што вам трэба, але гэта можа дапамагчы і answser пытанне тут у залежнасці ад таго, што вы хочаце дасягнуць.

Вы можаце прадухіліць усе паказальнікі падзей, якія будуць адпраўленыя на ўваход, выкарыстоўваючы ўласцівасць CSS: паказальнік-падзеі: не Гэта будзе свайго роду дадаць пласт па-над элемента, які будзе перашкаджаць вам пстрыкнуць ў ім ... Вы можаце таксама дадаць Курсор: тэкст для бацькоўскага элемента, каб вярнуць стыль тэксту курсор на ўваход ...

Карысна, напрыклад, калі вы не можаце змяніць JS/HTML модуля .. і вы можаце проста наладзіць яго з дапамогай CSS.

JSFIDDLE

5
дададзена

Гэта не магчыма з дапамогай CSS, але я выкарыстаў адзін трук CSS ў адным з майго вэб-сайта, калі ласка, праверце, калі гэта працуе для вас.

Хітрасць заключаецца ў тым: загарнуць у поле ўводу з DIV і зрабіць яго адносная, змясціць празрыстае выява ўнутры DIV і зрабіць яго абсалютным над тэкставым полем уводу, так што ніхто не можа змяніць яго.

CSS

.txtBox{
    width:250px;
    height:25px;
    position:relative;
}
.txtBox input{
    width:250px;
    height:25px;
}
.txtBox img{
    position:absolute;
    top:0;
    left:0
}

HTML

<div class="txtBox">
<input name="" type="text" value="Text Box" />

</div>

jsFiddle файла

2
дададзена
@Eric, ды гэта праўда, я выкарыстоўваць толькі CSS трук для дасягнення, як гэта, гэта не ўяўляецца магчымым з дапамогай CSS на дадзеным этапе.
дададзена аўтар Roy Sonasish, крыніца
На жаль, гэта не зусім толькі для чытання. Вы можаце атрымаць доступ да тэкставага полі з дапамогай абыходу да яго.
дададзена аўтар Eric, крыніца

Вы не ўсталяваць паводзіны элементаў кіравання з дапамогай CSS , толькі іх styling.You можна выкарыстоўваць jQuery ці проста Javascript , каб змяніць ўласцівасць аб'екта поля.

0
дададзена

Няма мадэлі паводзін не можа быць усталяваны з дапамогай CSS. Адзіны спосаб адключыць нешта ў CSS, каб зрабіць яго нябачным, альбо устаноўкай <�няма код> Дысплей: не або проста пакласці DIV з празрыстым IMG над ім і змена іх Z-загад адключыць карыстальніка факусоўкі на ім мышшу , Нават калі карыстальнік усё роўна будзе мець магчымасць засяродзіцца з укладкай з іншага поля.

0
дададзена

Чаму б не схаваць ўваходных элемент і замяніць яго элементам этыкеткі з такім жа зместам?

Я ламаў галаву над тым, як Рэагаваць TODOMVC прыкладанне выконваецца гэта тое ж самае, і гэта стратэгія яны прыдумалі.

Каб убачыць яго ў дзеянні, праверыць прыкладанне ніжэй, і глядзець ўласцівасці CSS з элементаў TODO пры падвойным пстрычцы іх, а затым пстрыкнуць па кнопцы.

http://todomvc.com/examples/react-backbone/#/

Пры візуалізацыі старонкі вы можаце мець ці рэдагуемы ўвод, або нередактируемую этыкетку з дысплеем: не; у залежнасці ад медыя-запыту.

0
дададзена